0

我的画布有一个对象，它存储为对象，我将画布存储到对象中，如下所示：

window.canvas = new Object();
temp = document.getElementById('canvas_id');
canvas[objname] = new Object();
canvas[objname].ctx =  temp.getContext("2d");

我遇到的问题是我不能使用 ctx 来绘制图像....

我在我的绘图功能中这样做：

只是让您知道图像设置如下：

img = new Image();
img.src = 'images/0.png';

稍后在脚本中绘制：

canvas['canvas1'].ctx.drawImage(img.src,abposx,abposy);

问题是我收到一个类型错误，上面写着：

Uncaught TypeError: Type error

有什么想法是因为我已经将 ctx 放在对象中，所以不能这样调用 ctx 吗？

4

1 回答 1

1

尝试传递图像本身而不是image.src尝试以下操作：

canvas['canvas1'].ctx.drawImage(img,abposx,abposy);

我希望这会有所帮助！

这是一个代码示例：

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var img = new Image();
  img.src = 'images/backdrop.png';
  img.onload = function(){
    ctx.drawImage(img,0,0);
    ctx.beginPath();
    ctx.moveTo(30,96);
    ctx.lineTo(70,66);
    ctx.lineTo(103,76);
    ctx.lineTo(170,15);
    ctx.stroke();
  }
}

来自https://developer.mozilla.org/samples/canvas-tutorial/3_1_canvas_drawimage.html

于 2012-12-05T06:36:04.653 回答