Javascript高级编程学习笔记（93）—— Canvas(10) 模式及图像数据

模式

模式其实就是重复的图像，用来填充或描边图形

要创建一个新模式，可以调用 createPattern（）并传入两个参数

1. 一个HTML img元素
2. 用于表示如何重复的字符串
   1. "repeat" 重复
   2. "repeat-x" 水平方向重复
   3. "repeat-y" 垂直方向重复
   4. "no-repeat" 不重复

如:

let image = document.images[0];

let pattern = document.createPattern(image,"repeat");

// 绘制矩形
context.fillStyle = pattern;
context.fillRect (10,10,150,150);

需要注意的是,模式与渐变一样,都从画布的(0,0)开始

将fillStyle设置为模式对象,只表示在特定区域内显示重复的图像,而不是从某个区域开始绘制重复的图像

createPattern() 方法的第一个参数也可以是 <video> 或者另外一个 <canvas>元素

使用图像数据

2D上下文一个优势在于,可以通过 getImageData 方法取得原始的图像数据

该方法接收四个参数: 

1. 画面区域的x坐标
2. 画面区域的y坐标
3. 画面宽度
4. 画面高度

该方法会返回一个 ImageData 实例

每个ImageData有以下三个属性:

1. width
2. height
3. data

data属性是一个数组,保存着每一个像素的数据

每一个像素用四个值来保存,分别表示红/绿/蓝/透明度,这些值每一个都介于 0~255  之间

如果我们希望将一张彩色图片变为黑白,即实现灰阶过滤,可以采用以下代码:

let drawing = document.getElementById("drawing");

if(drawing.getContext){
    let ctx = drawing.getContext("2d"),
    image = document.images[0],
    imageData,data,len,average,red,green,blue,alpha;

    // 绘制图像数据
    ctx.drawImage(image, 0, 0);

    // 取得图像数据
    imageData = ctx.getImageData(0,0,image.width,image.height);
    data = imageData.data;

    for(let i=0,len = data.length; i<len;i+=4){
        red = data[i];
        green = data[i+1];
        blue = data[i+2];
        alpha = data[i+3];

        // 求rgb平均值
        average = Math.floor((red+green+blue)/3);

        // 设置颜色值
        data[i] = average;
        data[i+1] = average;
        data[i+2] = average;
    }

    // 回写图像数据
    imageData.data = data;
    ctx.putImageData(imageData,0,0);
}