Question

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

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？

Answer 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

在一个对象中携带canvas ctx？

1 个答案: