注意： 如果有些同学试到这里发现有这个报错内容Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.，需要检查这行代码：
img.src = "img_the_scream.jpg";
这里的图片地址不能是跨域地址。网上有一些解决办法，这里就不展开讲了。
写入像素数据
你可以用putImageData()方法去对场景进行像素数据的写入。
ctx.putImageData(myImageData, x, y); //在画布的(x, y)点开始绘制myImageData所存储的像素信息。
所以我们可以把获取到的像素信息进行处理，然后再重新绘制，就得到了新的图形。看看下面这个实例：
html代码：
<canvas></canvas>
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var img = new Image(); img.src = 'img_the_scream.jpg'; ctx.drawImage(img, 0, 0); var imageData = ctx.getImageData(0,0,canvas.width, canvas.height); //获取ImageData var colors = imageData.data; //获取像素信息 function invert() { for (var i = 0; i < colors.length; i += 4) { //四个为一组 colors[i] = 225 - colors[i]; // red colors[i+1] = 225 - colors[i+1]; // green colors[i+2] = 225 - colors[i+2]; // blue colors[i+3] = 255; //alpha } ctx.putImageData(imageData, 220, 0); //从(220, 0)开始绘制改变过的颜色 } function toGray() { for (var i = 0; i < colors.length; i += 4) { var avg = (colors[i] + colors[i+1] + colors[i+2]) / 3; colors[i] = avg; // red colors[i+1] = avg; // green colors[i+2] = avg; // blue colors[i+3] = 255; //alpha } ctx.putImageData(imageData, 440, 0); //从(440, 0)开始绘制改变过的颜色 } invert(); //反转色 toGray(); //变灰色
实现的效果如下图：
左边部分是原图，中间部分是把原图颜色经过反转得到的图案，右边部分是把原图颜色变灰得到的图案。
性能优化
坐标点尽量用整数
浏览器为了达到抗锯齿的效果会做额外的运算。为了避免这种情况，请保证使用canvas的绘制函数时，尽量用Math.floor()函数对所有的坐标点取整。比如：
ctx.drawImage(myImage, 0.3, 0.5); //不提倡这样写，应该像下面这样处理 ctx.drawImage(myImage, Math.floor(0.3), Math.floor(0.5));
使用多个画布绘制复杂场景
比如做一个游戏，有几个层面：背景层（简单变化）、游戏层（时刻变化）。这个时候，我们就可以创建两个画布，一个专门用来绘制不变的背景（少量绘制），另一个用来绘制游戏动态部分（大量绘制），就像这样：
<canvas></canvas> <canvas></canvas>
用CSS设置静态大图
如果有一层是永远不变的，比如一张静态的背景图，最好使用div+css的方法去替代ctx.drawimage()，这么做可以避免在每一帧在画布上绘制大图。简单讲，dom渲染肯定比canvas的操作性能更高。
尽量少操作canvas的缩放
如果要对一个画布进行缩放，如果可以的话，尽量使用CSS3的transform来实现。总之，记住一个原则，能用html+div实现的尽量不用js对canvas进行操作。
更多Tips
将画布的函数调用集合到一起（例如，画一条折线，而不要画多条分开的直线）
使用不同的办法去清除画布(clearRect()、fillRect()、调整canvas大小)
尽可能避免 shadowBlur特性
有动画，请使用window.requestAnimationFrame() 而非window.setInterval()
结语
OK，canvas常用的API就基本总结完了，靠这些API已经足够开发一些中型游戏了。比如之前自己写的实例demo之小游戏tinyHeart，就是用这些函数画出来的。关键是这些函数的组合使用，多多练习就好了。
如果你把我之前的两篇文章都看了的话，相信你会对canvas越来越感兴趣。所以为了让大家的兴趣不会中断，我后续还会出一系列的关于canvas的实例，注意，是一系列！敬请期待！