JavaScript 将文本写入图像

Question

我在将文本写入图像时遇到问题。我需要循环图像。但我遇到一些问题。当我这样做时，最后一张图像显示并且图像尺寸很小。有人帮助我吗？

var div=document.getElementById("locations");
var canvas;

window.onload = function(){
    for(var i=0;i<10;i++){
        canvas=document.createElement("canvas");
        canvas.style.width="75px";
        canvas.style.height="75px"

        var context = canvas.getContext("2d");
        var imageObj = new Image();
        imageObj.onload = function(){
            context.drawImage(imageObj, 0, 0);
            context.font = "17px Calibri";
            context.fillText(i, 30, 36);
        };
        imageObj.src = "image.png"; 
        div.appendChild(canvas);
    };
}

<div id="locations"></div>
<canvas id="myCanvas" width="75" height="75"></canvas>

结果图像

Answer 1

使用canvas.height和width值而不是CSS样式。绘制 Canvas 后应用 CSS 样式值。

var div=document.getElementById("locations");
var canvas;

window.onload = function(){
    for(var i=0;i<10;i++){
        canvas=document.createElement("canvas");
        canvas.width=75;
        canvas.height=75;

        var context = canvas.getContext("2d");
        var imageObj = new Image();
        imageObj.onload = function(){
            context.drawImage(imageObj, 0, 0);
            context.font = "17px Calibri";
            context.fillText(i, 30, 36);
        };
        imageObj.src = "http://placehold.it/350x150"; 
        div.appendChild(canvas);
    };
}

<div id="locations"></div>