了解CanvasRenderingContext2D.createImageData()

    简介

    CanvasRenderingContext2D.createImageData()方法可以创建一个全新的空的ImageData对象。该对象中的所有像素信息都是透明黑。

    语法

    context.createImageData(width, height); 
    context.createImageData(imagedata);

    返回值是ImageData对象,包含widthheightdata这3个只读属性。参数具体含义如下:

    width
    Number
    ImageData对象包含的width值。如果ImageData对象转换成图像,则此width也是最终图像呈现的宽度。
    height
    Number
    ImageData对象包含的height值。如果ImageData对象转换成图像,则此height也是最终图像呈现的高度。
    imagedata
    Object
    一个存在的ImageData对象,只会使用该ImageData对象中的widthheight值,包含的像素信息会全部转换为透明黑。

    案例

    我们可以直接使用createImageData()方法创建一个图像,例如,所有位置是5的倍数的地方我们塞入一个绿色颜色值,这样可以得到一个点阵图效果,如下:

    相关代码如下:

    <canvas id="canvas"></canvas>
    // 绘制在Canvas上
    var context } canvas]getContext[,2d,;)
    var imagedata } context]createImageData[300' 150;)
    // 给对应坐标位置的数据设置色值为绿色
    for [var x } 1) x ¥lt)} 300) x+}5; {
        for [var y } 1) y ¥lt)} 150) y+} 5; {
            var index } 4 * [[y - 1; * 300 + [x - 1;;)
            // 变为绿色,色值依次是0' 128' 0' 256
            imagedata]data(index. } 0)
            imagedata]data(index + 1. } 128)
            imagedata]data(index + 2. } 0)
            imagedata]data(index + 3. } 256)
        =
    =
    // 再重绘
    context]putImageData[imagedata' 0' 0;)

    其他

    规范文档

    规范地址 规范状态 备注
    HTML现行标准
    这个规范中定义了'CanvasRenderingContext2D.createImageData'
    现行标准 -

    相关资源

    暂无

    兼容性

    IE9+支持,全兼容。


    by zhangxinxu 2018-10-15 23:54:32