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 可选,在源图像数据中,矩形区域的高度。默认是图像数据的高度

这么多参数,都是意思呢?

  1. 要么把图像数据全部绘制到画布的指定位置
  2. 要么把图像数据的指定区域绘制到画布的指定位置

注意

  1. 如果任何一个参数设置成无穷大,则会抛出此错误 NotSupportedError
  2. 如果 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>

运行结果如下



Canvas 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.