DOM 循环中的 HTML5 画布

Question

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

HTML5 画布似乎是实现这一目标的最简洁方法，但我对画布没有什么经验。添加画布后，该函数将作为 getContext 上的未定义引用中断。

感谢您的帮助！

小提琴： http://jsfiddle.net/dpnq7sj4/

代码：

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;

Answer 1

你不需要画布来画一个圆圈。

用 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>

然后在你的 li 标签中，像这样显示首字母：

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

Answer 2

哦，答案（（（ 好吧，如果你不想画布：http://jsfiddle.net/dpnq7sj4/4/

var names = ["Joe", "Bob", "Clark", "Henry"];
var numberOf = names.length;
//Players List
var text = "<ul>";
for (var i = 0; i < numberOf; i++) {
    var canvas = document.createElement('canvas');
    canvas.className = 'myCanvas';
    canvas.height = 50;
    canvas.width = 50;
    text += '<li class="playerListItem">' + canvas.outerHTML + '<label><input type="checkbox" class="playerCheckbox">' + names[i] + '</label></li>';
}
text += "</ul>";

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

Array.prototype.forEach.call(document.getElementsByClassName('playerListItem'), function (li, i) {
    var nameLetter = names[i].charAt(0);
    var canvas = li.getElementsByClassName('myCanvas')[0];
    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.fillStyle = '#000';
    context.fillText(nameLetter, canvas.width / 2 - width / 2, canvas.height / 2 + height / 2);
});

Answer 3

您可以使用一些 html 技巧，例如边框半径（如果您使用 HTML5），不需要任何特殊的东西，也不需要绘制圆圈。给圆一个默认宽度有助于使其均匀；）

var i,
  names = ["Joe", "Bob", "Clark", "Henry"],
  numberOf = names.length,
  text;
//Players List
text = "<ul class='playerList'>";
for (i = 0; i < numberOf; i++) {
  text += "<li class='playerListItem'><span class='bullet'>" + names[i][0] + "</span><label for='item" + i + "'><input type='checkbox' id='item" + i + "' class='playerCheckbox' />" + names[i] + "</label></li>";
}
text += "</ul>";

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

ul.playerList {
  list-style-type: none;
}
.bullet {
  border: solid #333333 1px;
  border-radius: 60px;
  display: inline-block;
  text-align: center;
  width: 20px;
  vertical-align: center;
}

<div id="recentPlayersContainer">
</div>