Canvas putImageData() 绘制数据
终于又到了我喜欢的章节了，前几章节太憋屈了，一直使用开发者模式，都没法直观的感受范例
本章好了，我们要讲解的方法是 putImageData()，它能将一个图像数据 ImageData 绘制到画布上
Canvas putImageData 方法
ctx.putImageData() 可以把已有的 ImageData 数据绘制到画布上的指定区域
该方法不受画布转换矩阵的影响
(我去，终于碰到一个不受影响的绘制函数了)
语法
void ctx.putImageData(imagedata, dx, dy); void ctx.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight);
| 参数 | 说明 |
|---|---|
| imageData | 一个 ImageData 实例，要绘制的图像数据 |
| dx | 源图像数据在目标画布中的位置偏移量（x 轴方向的偏移量） |
| dy | 源图像数据在目标画布中的位置偏移量（y 轴方向的偏移量） |
| dirtyX | 可选，在源图像数据中，矩形区域左上角的位置。默认是整个图像数据的左上角（x 坐标） |
| dirtyY | 可选，在源图像数据中，矩形区域左上角的位置。默认是整个图像数据的左上角（y 坐标） |
| dirtyWidth | 可选，在源图像数据中，矩形区域的宽度。默认是图像数据的宽度 |
| dirtyHeight | 可选，在源图像数据中，矩形区域的高度。默认是图像数据的高度 |
这么多参数，都是意思呢？
- 要么把图像数据全部绘制到画布的指定位置
- 要么把图像数据的指定区域绘制到画布的指定位置
注意
- 如果任何一个参数设置成无穷大，则会抛出此错误
NotSupportedError - 如果 imageData 不是一个完整的图像数据，会抛出错误
InvalidStateError
范例
我们现在画布上绘制一个纵横交错的蓝绿矩形，然后把一小部分复制出来，绘制到另一个位置
<!DOCTYPE html> <meta charset="utf-8"> <canvas id="canvas-1" width="400" height="300"> </canvas> <script> var c = document.getElementById("canvas-1"); var ctx = c.getContext("2d"); ctx.save(); ctx.translate(50,50); ctx.fillStyle="green" ctx.fillRect(0,0,50,200); ctx.rotate(-30 * Math.PI / 180) ctx.fillStyle="blue" ctx.fillRect(0,0,50,200); ctx.restore(); var data = ctx.getImageData(50,50,50,50); ctx.putImageData(data,200,100,); ctx.strokeStyle="red" ctx.strokeRect(50,50,50,50); </script>
运行结果如下