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 に答える