标签：10 Canvas repeat 重复 image Javascript let 图像 data

模式

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

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

标签：10,Canvas,repeat,重复,image,Javascript,let,图像,data
来源： https://www.cnblogs.com/lhyxq/p/10569320.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。