Canvas ImageData() 创建对象

上一章节我们好像有点跑题了... ImageData 还没介绍完呢....

ImageData 对象只有三个属性,没有方法,饿...好像有一个,我们姑且就算构造函数也算一个方法吧

ImageData 构造函数

ImageData 对象也有一个构造函数,跟它自己同名,可以接受三个参数,使用这个构造函数就可以创建一个 ImageData 对象的实例

好绕口啊....

语法

new ImageData(array, width[, height]);
new ImageData(width, height);

我勒个去,它还可以接受两个参数,参数不用我解释了吧,都是它自己的属性

算了,还是罗列下好

参数 说明
array 一个是 Uint8ClampedArray,就是一个装满了颜色的一维数组
width ImageData 所表示的图像的宽度
height ImageData 所表示的图像的宽度
  1. 如果使用三个参数的构造方法,那么还有一个约束条件,就是必须满足 Uint8ClampedArraylength 值等于 4*width*height ,否则会报错

  2. 如果使用两个参数的构造方法,那么会自动创建一个 4*width*height 大小的一维数组,然后以 0 填充整个像素矩阵

    全部都是 0 是啥意思? #000000 知道是啥颜色吧,对,全部是 0 就表示一个透明黑的图片

    透明黑是啥? 就是透明的图像啦

  3. 如果传递了 array 参数,那么 height 参数可以选择不传递,如果不传递,那么它会自己计算

    height = array.length / ( width * 4 )
    

范例

创建一个 1 x 1 大小的纯黑色的图像数据

var imageData = new ImageData(1, 1);

结果是啥呢?

我们使用下面的代码输出看看

console.log(new ImageData(1, 1));

输出结果如下

Canvas 基础教程

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

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

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