JavaScript将文本写入图像

Question

我有关于将图像写入图像的问题。我需要循环图像。但是我遇到了一些问题。当我这样做时，最后一个图像显示和图像大小很小。有人帮帮我吗？

＆＃13;

＆＃13;

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);
    };
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

结果图片

Answer 1

使用canvas.height和width值代替CSS样式。绘制画布后应用的CSS样式值。

＆＃13;

＆＃13;

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);
    };
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;