javascript - 如何将现有的 绘制到 Canvas

Question

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

但是如何将现有标签绘制到 Canvas 上:

在 html 中:

<img src='test.png'>

我为什么要这样做？我想使用 pagespeed 优化图像加载

Answer 1

您的问题在 google 上的第一个命中率很有希望:

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

参见 w3Schools