5

私はjavascriptを使用してこれを行うことができることを知っています:

var ctx = getCanvas('testCanvas').getContext('2d'); // get Canvas context
var img = new Image();
img.src = 'test.png';
img.onload = function(){
    ctx.drawImage(img, 200, 200); // x, y, width, height
}

ただし、既存のタグをキャンバスに描画する方法:

HTMLで：

<img src='test.png'>

なぜ私はこれをしたいのですか？ページ速度を使用して画像の読み込みを最適化したい

4

5 に答える 5

4

あなたの質問に対する最初のグーグルヒットは有望です：

var c=document.getElementById("testCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("existingHTMLImageElementId");
ctx.drawImage(img,10,10);

w3Schoolsを見る

于 2013-07-17T06:36:36.087 に答える
2

試す

var canvas=document.getElementById("test");
var ctx=canvas.getContext("2d");
var img=document.getElementById("imgID");
ctx.drawImage(img,10,10);
于 2013-07-17T06:59:08.167 に答える
1

あなたが id を持っていると仮定すると、#image使用できます

var img = document.getElementById("image");
var ctx = getCanvas('testCanvas').getContext('2d'); // get Canvas context
img.onload = function(){
    ctx.drawImage(img, 200, 200); // x, y, width, height
}
于 2013-07-17T06:36:03.943 に答える
1

<img>画像のIDを持つタグがあるとします。getElementById メソッドを使用して、イメージ参照を取得できます。次のようなもの：

var img = document.getElementById("image");

次に、上記のコードを使用します。

于 2013-07-17T06:36:42.277 に答える
1

画像 src を新しい画像に与えることができます

var ctx = getCanvas('testCanvas').getContext('2d'); // get Canvas context
var img = new Image();
img.src = document.getElementById('testImage').src;
img.onload = function(){
    ctx.drawImage(img, 200, 200); // x, y, width, height
}

画像要素に id を追加します

<img src='test.png' id="testImage">
于 2013-07-17T06:36:58.543 に答える