Javascript 如何绘制现有<；img>；画

我知道我可以使用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'>

---

我为什么要这么做？我想使用pagespeed优化图像加载，假设您有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
}

---

你的问题第一次在谷歌搜索很有希望：

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

---

请参见假设您有一个带有图像id的

标记。可以使用getElementById方法获取图像引用。如下所示：

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

---

然后使用上面的代码。

您可以将图像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">

试试看

---

这是否会导致请求映像两次？否。只有在我不确定是否调用img.onload时，才会访问映像？

var canvas=document.getElementById("test");
var ctx=canvas.getContext("2d");
var img=document.getElementById("imgID");
ctx.drawImage(img,10,10);