那些年玩Canvas踩过的坑

最近正在学习html5 的canvas 的用法，遇到了一些问题，也从各个地方找到了解决方法，故此记录，与君共享，也为了避免日后自己忘记。

1、浏览器报错canvasapp.js:30 Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
百度了下大概意思就是画布被跨域数据污染。
解决方法就是将我们的项目部署到web服务器上或者直接使用webstorm的浏览器访问。

2、drawImage的问题。
一开始写了

var theCanvas=document.getElementById("canvas");
var context=theCanvas.getContext("2d");
object=new Image();
object.src="test.png";
context.drawImage(object,0,0);

然后发现虽然没有报错，但是画布上也没有显示图片。查了许多资料发现原因是在使用drawImage绘图时，图片还未加载出来，于是就会导致画布是空白的状态。因此应该改成

var theCanvas=document.getElementById("canvas");
var context=theCanvas.getContext("2d");
object=new Image();
object.src="test.png";
object.onload=function(){
    context.drawImage(object,0,0);
}

等图片加载完毕之后再将其“画”出来。
由于这里的onload方法是异步的，因此对于所绘的图形的操作也要放在onload方法里面，否则会出现找不到对象的情况。例如：

var theCanvas=document.getElementById("canvas");
var context=theCanvas.getContext("2d");
object=new Image();
object.src="test.png";
object.onload=function(){
    context.drawImage(object,0,0);
    object.ImageData=context.getImageData(0,0,object.width,object.height);
}
startUp();
function startUp(){
    console.log(object.ImageData);//undefined
}

应该将startUp()的调用放在onload方法中。

不定时踩坑，不定时更新。