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";