Canvas踩过的坑

1、出于对于安全的考虑，drawImage绘制的图片不允许跨域。

1)、如果服务器允许跨域：

var image = new Image();

image.crossOrigin = "*";

2)、如果服务器不允许跨域：
可以将图片转换为二进制文件，使用jsonp的形式解决跨域问题。

2、使用canvas渲染多张图片时，图片加载完成的先后可能并不是代码中所写顺序，可能会导致图片被遮盖。可以使用onload事件的回调函数来强制决定图片的加载顺序。

var image1 = new Image();
var image2 = new Image();

image1.onload = function () {
    console.log("image1");
    image2.src="../img/image2.png";
}

image2.onload = function () {
    console.log("image2");
}

image1.src = "../img/image1.png";