canvas : 几个入门需要的基本概念

Posted 2021-02-04 foxcharon

这段时间做项目需要用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）

 

以上。以后可能会更新。