Javascript高级编程学习笔记(93)—— Canvas(10) 模式及图像数据
模式
模式其实就是重复的图像,用来填充或描边图形
要创建一个新模式,可以调用 createPattern()并传入两个参数
- 一个HTML img元素
- 用于表示如何重复的字符串
- "repeat" 重复
- "repeat-x" 水平方向重复
- "repeat-y" 垂直方向重复
- "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 方法取得原始的图像数据
该方法接收四个参数:
- 画面区域的x坐标
- 画面区域的y坐标
- 画面宽度
- 画面高度
该方法会返回一个 ImageData 实例
每个ImageData有以下三个属性:
- width
- height
- 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);
}
Javascript高级编程学习笔记(93)—— Canvas(10) 模式及图像数据的更多相关文章
- Javascript高级编程学习笔记(84)—— Canvas(1)基本用法
Canvas绘图 Canvas自HTML5引入后,由于其炫酷的效果成为HTML5新增功能中最受欢迎的部分 Canvas元素通过在页面中设定一个区域,然后就可以使用JS在其中绘制图形 <canva ...
- Javascript高级编程学习笔记(94)—— Canvas(11) 合成
合成 除了之前介绍的属性之外,还有两个属性会应用到整个2d上下文中; globalAlpha 用于指定所有绘制的透明度 globalComposition 用于表示后绘制的图形怎样与先绘制的图形进行结 ...
- Javascript高级编程学习笔记(88)—— Canvas(5)绘制文本
绘制文本 同样的,canvas也为绘制文本提供了相应的方法. 2D上下文提供的文本绘制方法主要有两个: fillText() strokeText() 这两个方法都接受四个参数 要绘制的文本字符串 绘 ...
- Javascript高级编程学习笔记(86)—— Canvas(3)绘制矩形
绘制矩形 矩形是唯一一种可以直接在2D上下文中绘制的形状. 与矩形有关的方法包括: fillRect() strokeRect() clearRect() 上述方法都接收四个参数: 绘制矩形的 X 坐 ...
- Javascript高级编程学习笔记(91)—— Canvas(8) 阴影
阴影 2D上下文将会根据以下属性为形状或路径绘制阴影 shadowColor: 用于设置阴影颜色,默认为黑色 shadowOffsetX: 形状或路径X方向的阴影偏移量,默认为0 shadowOffs ...
- Javascript高级编程学习笔记(92)—— Canvas(9) 渐变
渐变 渐变由 canvasGradient 实例表示 要创建一个渐变对象需要调用 createLinearGradient() 方法 该方法接收四个参数: 起点的x坐标 起点的y坐标 终点的x坐标 终 ...
- Javascript高级编程学习笔记(90)—— Canvas(7) 绘制图像
绘制图像 2D绘图上下文内置了对图像的支持 如果希望将一幅图绘制到画布上,可以使用 drawImage() 的方法 该方法有三种不同的参数数组合以对应不同的应用场景 将<img>绘制到画布 ...
- Javascript高级编程学习笔记(89)—— Canvas(6) 变换
变换 通过上下文的变化,可以对图像进行处理后再将其绘制到画布上 当我们创建上下文时,会以默认值初始化变化矩阵,在默认的变换矩阵下所有处理都按描述直接绘制. 而当我们为上下文应用变换时,会导致使用不同的 ...
- Javascript高级编程学习笔记(87)—— Canvas(4)绘制路径
绘制路径 2D上下文支持许多在画布上绘制路径的方法 通过路径可以创造出复杂的形状和线条,要绘制路径首先必须调用beginPath()方法,表示开始绘制路径 然后再通过下列的方法绘制路径: arc(x, ...
随机推荐
- Typescript---03 类、接口、枚举
传统的javascript程序使用函数和基于原型的继承来创建可重用的组件,从ECMAScript2015(ECMAScript 6)开始,可以使用基于类的面向对象方式. 一.类: 定义类(class) ...
- centos7系统部署cobbler批量安装系统
系统环境: 一.开启两个网卡.一个仅主机模式,一个桥接模式,主机模式对内提供cobbler服务 [root@localhost ~]# ip a 1: lo: <LOOPBACK,UP,LOWE ...
- cxf webservice请求https
本地java请求https接口,不需要添加证书: 只需要修改配置文件applicationContext-soap-client.xml: <beans xmlns="http://w ...
- 编译php-5.3.28
1. 下载php-5.3.28 2. 编译/安装 ./configure --prefix=/usr/local/php --enable-fpm --enable-maintainer-zts -- ...
- windows下安装Python虚拟环境virtualenvwrapper-win
1 前言 由于Python的版本众多,还有Python2和Python3的争论,因此有些软件包或第三方库就容易出现版本不兼容的问题. 通过 virtualenv 这个工具,就可以构建一系列 虚拟的 ...
- hadoop2.x HDFS HA linux环境搭建
HDFS High Availability Using the Quorum Journal Manager 准备3台机器可以更多 NN DN ZK ZKFC JN RM DM n ...
- oracle数据库学习
trunc(number[,decimals])--number 待做截取处理的数值:decimals 指明需保留小数点后面的位数 CREATE PUBLIC DATABASE LINK Co ...
- tensorflow卷积神经网络-【老鱼学tensorflow】
前面我们曾有篇文章中提到过关于用tensorflow训练手写2828像素点的数字的识别,在那篇文章中我们把手写数字图像直接碾压成了一个784列的数据进行识别,但实际上,这个图像是2828长宽结构的,我 ...
- nginx了解
nginx常用命令 nginx -s quit 优雅停止nginx,有连接时会等连接请求完成再杀死worker进程 nginx -s reload 优雅重启,并重新载入配置 ...
- 大数据ssh疑点跟踪
相信运维的对ssh免密登陆应该是对这个再清楚不过的吧,由于我们大数据对于安全这方便管控的很严格,单独找一台物理机作为跳板机,其他的机器都必须要从这个跳板机免密登陆,由于机器比较的多,其中dn30这个域 ...