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

时间：2024-01-11 20:20:08

模式

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

要创建一个新模式，可以调用 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);

}

　　

相关文章