canvas : 几个入门需要的基本概念
这段时间做项目需要用canvas。
而我在看文档的时候,发现canvas是一个很独立的API:和DOM BOM基本上没什么关系。
在学习canvas的时候需要了解很多概念,否则看某些文档的讲解可能会看不懂,比如MDN。
那么,第一步。
<canvas id="canvas"></canvas>
var element = document.getElementById("canvas")
HTMLCanvasElement
刚才声明的变量 element 就是 HTMLCanvasElement,即canvas网页元素。
HTMLCanvasElement 有width 和height ,而且有默认值。
这个问题在图像操作时尤为重要——要想让你的canvas图片不扭曲,就必须主动设置weidh和height。用CSS是不行的,HTMLCanvasElement可以用CSS设定为你想要的大小,但图片会扭曲。
可以直接赋值(用js或者直接写HTML里都可以)设置,也可以通过js(jquery)的方法设置。
// 直接赋值
element.width = 500
// js赋值
element.getAttribute("width", 500)
// jquery赋值
$(element).attr("width", 500)
CanvasRenderingContext2D
CanvasRenderingContext2D,几乎是一切canvas操作的起点。
在HTMLCanvasElement上调用方法可以得到。
var ctx = element.getContext('2d');
这里的 ctx 就是 CanvasRenderingContext2D 对象。
顺便一提,getContext()方法有两种参数,一个是"2d",另一个是"experimental-webgl"(webgl用,这里不涉及)。
有了CanvasRenderingContext2D,我们就可以做各种各样的事情了。
以像素控制为例。
说到像素控制,就又要引入一个新概念了。
ImageData
CanvasRenderingContext2D调用getImageData()方法可以获得ImageData对象。
var ImageData = ctx.getImageData(sx, sy, sw, sh);
这4个参数都是必须要传的。
sx
将要被提取的图像数据矩形区域的左上角 x 坐标。
sy
将要被提取的图像数据矩形区域的左上角 y 坐标。
sw
将要被提取的图像数据矩形区域的宽度。
sh
将要被提取的图像数据矩形区域的高度。
ImageData对象有3个属性,其中比较重要的是data属性。
注意:这三个属性都是只读的。
就是说,你可以改ImageData,也可以改ImageData.data里面的值,但是你不能直接改ImageData.data。
ImageData.data
ImageData.data属性返回一个Uint8ClampedArray数组。
Uint8ClampedArray是一种特殊的数组。
Uint8ClampedArray
(8位无符号整型固定数组) 类型化数组表示一个由值固定在0-255区间的8位无符号整型组成的数组;如果你指定一个在 [0,255] 区间外的值,它将被替换为0或255;如果你指定一个非整数,那么它将被设置为最接近它的整数。(数组)内容被初始化为0。一旦(数组)被创建,你可以使用对象的方法引用数组里的元素,或使用标准的数组索引语法(即使用方括号标记)。
那么,颜色数据是怎么被记到这个数组里面的?
其实很简单。
首先,这是一个一维数组,里面全是0-255的数字。
其次,一个像素点需要4个数字来表示:R通道、G通道、B通道,alpha通道。
var data = ImageData.data
data[0]:red
data[1]:green
data[2]:blue
data[3]:alpha opacity
data[4]:red
...
data[data.length - 1]:alpha opacity
data[0]:第一个像素点的R通道值。
data[1]:第一个像素点的G通道值。
data[2]:第一个像素点的B通道值。
data[3]:第一个像素点的alpha通道值。
data[4]:第2个像素点的R通道值。
...
即ImageData.data.length %4 === 0(ImageData.data.length一定可以被4整除)。
比如有个100*100的canvas区域,有10000个点,那么ImageData.data里面就有40000个值。
循环里面的数值进行修改就可以做各种各样的颜色操作了。(比如反色就是RGB通道:255-x)
以上。以后可能会更新。
最新文章
- GSM Hacking Part① :使用SDR扫描嗅探GSM网络
- 翻箱倒柜,《Delphi中建议使用的语句》
- iOS开发拓展篇—音频处理(音乐播放器1)
- jQuery的动画队列
- thinkphp的伪静态化
- js种的循环语句
- linux下无线网卡的ioctl 接口
- java事件处理
- java学习之总结
- (转)认识java中的堆和栈
- springboot入门_data-jpa
- 基于微信小程序的失物招领系统的Postmortem
- spark als scala实现(二)
- md 常用语法
- Linux 查看内存状态
- 2018下半年Android面试历程
- Oracle行列转换小结
- 安装设置IIS5.1
- cookie函数封装
- ssh 上传文件以及文件夹到linux服务器
热门文章
- 从零开始学习Prometheus监控报警系统
- weblogic高级进阶之ssl配置证书
- java读写Excel模板文件,应用于负载均衡多个服务器
- Vue数据更新页面没有更新问题总结
- 2020/6/10 JavaScript高级程序设计 BOM
- ceph luminous版本的安装部署
- 重学 Java 设计模式:实战中介者模式「按照Mybaits原理手写ORM框架,给JDBC方式操作数据库增加中介者场景」
- 一个比CBitmap更优秀的类&#160;--&#160;CImage类
- Spring拦截器和SpringAop实现
- 浏览器的回流与重绘 (Reflow &; Repaint)