DOM循环中的HTML5画布

Question

I have an array displayed as a list of objects. For each name in the list, there should be a circle to its left, displaying the first letter of that name.

HTML5 canvas seems to be the cleanest way to pull this off, but I have little experience with canvases. When the canvas is added the function breaks as an undefined reference on the getContext.

Thanks for your help!

Fiddle: http://jsfiddle.net/dpnq7sj4/

Code:

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

You don't need a canvas for a circle.

Define the circle once with 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>

Then in your li tag, display the initials like this:

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

Answer 2

Oh, answers ((( Well if you wonna canvas: 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

You could do it with some html tricks like border radius (if you are anyhow using HTML5), doesn't require anything special, and no circles to be drawn. Giving the circle a default width helps to make it uniform ;)

 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>