Javascript DOM循环中的HTML5画布

我有一个数组显示为对象列表。对于列表中的每个名称，其左侧应有一个圆圈，显示该名称的第一个字母

HTML5画布似乎是实现这一点的最干净的方式，但我对画布几乎没有经验。添加画布时，函数作为getContext上的未定义引用中断

谢谢你的帮助

小提琴：

代码：

names = ["Joe","Bob","Clark","Henry"];
var numberOf = names.length; 
//Players List
var text = "<ul>";
for (i = 0; i < numberOf; i++) {
    var nameLetter = names[i].charAt(0);
    text += "<li class='playerListItem'><canvas id="myCanvas" height:100px width:100px></canvas><label><input type='checkbox' class='playerCheckbox'>" + names[i] + "</label></li>";

  //Circle
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;
  var radius = 25;
  context.beginPath();
  context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
  context.fillStyle = '#f0f0ef';
  context.fill();
  context.fillStyle = "black";
  var width = context.measureText(nameLetter).width;
  var height = context.measureText("w").width; // this is a GUESS of height
  context.fillText(text, 200 - (width/2) ,200 + (height/2));
    }
text += "</ul>";

//Ammend HTML
document.getElementById("recentPlayersContainer").innerHTML = text;

names=[“乔”、“鲍勃”、“克拉克”、“亨利”]；
var numberoff=names.length；
//球员名单
var text=“
”；
对于（i=0；i”+名称[i]+“”；
//圈
var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
var centerX=canvas.width/2；
var centerY=canvas.height/2；
var半径=25；
context.beginPath（）；
弧（centerX，centerY，半径，0，2*Math.PI，false）；
context.fillStyle='#f0ef'；
context.fill（）；
context.fillStyle=“黑色”；
var-width=context.measureText（nameLetter）.width；
var height=context.measureText（“w”）.width；//这是对高度的猜测
填充文本（文本，200-（宽度/2），200+（高度/2））；
}
text+=“
”；
//Ammend HTML
document.getElementById（“RecentPlayerContainer”）.innerHTML=text；

您可以使用一些html技巧，如边界半径（如果您使用HTML5），无需任何特殊要求，也无需绘制圆。为圆指定默认宽度有助于使其均匀；）

vari，
姓名=[“乔”、“鲍勃”、“克拉克”、“亨利”]，
numberoff=names.length，
文本；
//球员名单
text=“
”；
对于（i=0；i”+名称[i][0]+“+名称[i]+””；
}
text+=“
”；
//Ammend HTML
document.getElementById（“RecentPlayerContainer”）.innerHTML=text
ul.playerList{
列表样式类型：无；
}
.子弹{
边框：实心#333333 1px；
边界半径：60px；
显示：内联块；
文本对齐：居中；
宽度：20px；
垂直对齐：居中；
}
您可以使用一些html技巧，如边界半径（如果您使用HTML5），无需任何特殊要求，也无需绘制圆。为圆指定默认宽度有助于使其均匀；）


vari，
姓名=[“乔”、“鲍勃”、“克拉克”、“亨利”]，
numberoff=names.length，
文本；
//球员名单
text=“
”；
对于（i=0；i”+名称[i][0]+“+名称[i]+””；
}
text+=“
”；
//Ammend HTML
document.getElementById（“RecentPlayerContainer”）.innerHTML=text
ul.playerList{
列表样式类型：无；
}
.子弹{
边框：实心#333333 1px；
边界半径：60px；
显示：内联块；
文本对齐：居中；
宽度：20px；
垂直对齐：居中；
}
圆不需要画布

使用CSS定义一次圆：

<style>
.playerInitials {
    background: none repeat scroll 0 0 #f0f0ef;
    border-radius: 50%;
    color: black;
    display: inline-block;
    font-size: 10px;
    font-weight: bold;
    height: 25px;
    width: 25px;
    line-height: 25px;
    margin-right: 5px;
    text-align: center;
    vertical-align: text-bottom;
}
</style>


.playerInitials{
背景：无重复滚动0 0#f0ef；
边界半径：50%；
颜色：黑色；
显示：内联块；
字体大小：10px；
字体大小：粗体；
高度：25px；
宽度：25px；
线高：25px；
右边距：5px；
文本对齐：居中；
垂直对齐：文本底部；
}

然后在您的li标签中显示首字母，如下所示：

<li><span class="playerInitials">MM</span> Mickey Mouse</li>

MM米老鼠
圆不需要画布

使用CSS定义一次圆：

<style>
.playerInitials {
    background: none repeat scroll 0 0 #f0f0ef;
    border-radius: 50%;
    color: black;
    display: inline-block;
    font-size: 10px;
    font-weight: bold;
    height: 25px;
    width: 25px;
    line-height: 25px;
    margin-right: 5px;
    text-align: center;
    vertical-align: text-bottom;
}
</style>


.playerInitials{
背景：无重复滚动0 0#f0ef；
边界半径：50%；
颜色：黑色；
显示：内联块；
字体大小：10px；
字体大小：粗体；
高度：25px；
宽度：25px；
线高：25px；
右边距：5px；
文本对齐：居中；
垂直对齐：文本底部；
}

然后在您的li标签中显示首字母，如下所示：

<li><span class="playerInitials">MM</span> Mickey Mouse</li>

MM米老鼠
哦，答案(((
好吧，如果你不喜欢画布：

var name=[“乔”、“鲍勃”、“克拉克”、“亨利”]；
var numberoff=names.length；
//球员名单
var text=“
”；
对于（变量i=0；i'+canvas.outerHTML++'+names[i]+'；
}
text+=“
”；
//Ammend HTML
document.getElementById（“RecentPlayerContainer”）.innerHTML=text；
Array.prototype.forEach.call（document.getElementsByClassName（'playerListItem'），函数（li，i）{
var nameLetter=名称[i]。字符（0）；
var canvas=li.getElementsByClassName（'myCanvas'）[0]；
var context=canvas.getContext（'2d'）；
var centerX=canvas.width/2；
var centerY=canvas.height/2；
var半径=25；
context.beginPath（）；
弧（centerX，centerY，半径，0，2*Math.PI，false）；
context.fillStyle='#f0ef'；
context.fill（）；
context.fillStyle=“黑色”；
var-width=context.measureText（nameLetter）.width；
var height=context.measureText（'W'）.width；//这是对高度的猜测
context.fillStyle='#000'；
context.fillText（nameLetter，canvas.width/2-width/2，canvas.height/2+height/2）；
});
哦，答案(((
好吧，如果你不喜欢画布：

var name=[“乔”、“鲍勃”、“克拉克”、“亨利”]；
var numberoff=names.length；
//球员名单
var text=“
”；
对于（变量i=0；i'+canvas.outerHTML++'+names[i]+'；
}
text+=“
”；
//Ammend HTML
document.getElementById（“RecentPlayerContainer”）.innerHTML=text；
Array.prototype.forEach.call（document.getElementsByClassName（'playerListItem'），函数（li，i）{
变量名称字母