从url加载图像并绘制到HTML5 Canvas

Question

我在javascript中从网址加载图片时遇到问题.下面的代码有效,但我不想让从html加载图像.我想使用纯JavaScript加载来自网址的图片.

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("imImageId");
ctx.drawImage(img, 0, 0);

Answer 1

简单,只需在JavaScript中创建一个图像对象,设置src,并在绘制之前等待加载事件.

工作实例:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0);
};
img.src = 'https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png';

<canvas id="myCanvas"></canvas>

Answer 2

这很容易......

var img=new Image();
img.onload=start;
img.src="myImage.png";
function start(){
    ctx.drawImage(img,0,0);
}