小编Chr*_*ris的帖子

为什么我不能使用javascript函数在html画布上绘制多个图像?

我有这样的javascript函数:

function drawImage(canvas, image_source, dx, dy) {
  image = new Image();
  image.src = image_source;  
  image.onload = function() {
    c=canvas.getContext("2d");
    c.drawImage(image,dx,dy,100,100);
  }
}
Run Code Online (Sandbox Code Playgroud)

当我连续两次调用此函数时,例如:

drawImage(canvas, "foo.jpg", 0, 0);
drawImage(canvas, "bar.jpg", 0 ,100);
Run Code Online (Sandbox Code Playgroud)

bar被绘制两次,一次在0,一次在100
如果我切换顺序以便最后调用foo,foo会被绘制两次.

我试图使用数组作为图像,如"c.drawImage(图像[加载++],dx,dy,100,100"和两个图像分别绘制,但他们的顺序是随机的.

有没有办法使用这样的函数在画布上绘制图像?

javascript html5 canvas

4
推荐指数
1
解决办法
748
查看次数

标签 统计

canvas ×1

html5 ×1

javascript ×1