Question

我正在尝试在画布上绘制多个图像，并且所有图像都是动态生成的。如果我尝试以循环形式绘制，则Canvas无法显示任何内容。

var pname=getUrlParameter("pname");//getting a string of images
var pname_array = pname.split(",");//converting int the form of array
console.log(pname_array);

$("canvas#c").width("375");//setting width of canvas
var height_canvas = pname_array.length * 554;//total of height of canvas  depends on the number of images (each image height should be 554px)
$("canvas#c").height(height_canvas);

var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");

for(var i=0; i < pname_array.length; i++){
    var canvas = document.getElementById("c");
    var ctx = canvas.getContext("2d");
    var image = new Image();
    image.src = image_get+pname_array[i]+'-sy1';//image source for each iteration
    //image.onload = function() {
    ctx.drawImage( image, 0, (i*554) );//drawing the image
    //};
}

Answer 1

在for循环中删除这两行，

var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");

您已经在循环外声明了对象。

如何以循环形式在画布上绘制多个图像？

1 个答案: