Canvas基础知识总结之一

canvas的HTML语法：

<canvas> Canvas not supported </canvas>

上面这句代码中内容部分所含的文本，这种文本的叫法“后备内容”，浏览器在不支持canvas元素的时候才会显示方该内容。




canvas元素的大小与绘图表面的大小

canvas元素实际上有二套尺寸：一个是元素本身大小，另一个是元素绘图表面的大小，


当设置元素的width和height属性时，实际上是同时修改了该元素的本身的大小和元素绘图表面的大小，然而，如果是通过css来设置canvas元素的大小，那么只会改变元素本身的大小，不会影响到元素绘图表面的大小。


在默认情况下，canvas元素与其绘图表面都是宽300像素，高150像素。




canvas元素本身提供了二个属性和三个方法


二个属性：width、height， 是用来设置canvas元素绘图表面尺寸的。
三个方法：getContext()、toDataURL(type, quality) 、 toBlob(callback, type, args...)

getContext：  返回与该canvas元素相关的绘图环境对象，每个canvas元素都有一个这样的环境对象，而且每一个环境对象都与一个canvas元素相关联。

toDataURL： 返回一个数据地址，你可以将它设置为img元素的src属性值。第一个参数指定了图像的类型，例如image/jpeg或image/png，如果不指定一个参数，则默认wgetimage/png，第二个参数必须是0~1.0之间的一个double类型的值，它表示JEPG图片的显示质量。

toBlob：创建一个用于表示此canvas元素图像文件的Blob，第一个参数是一个回调函数，浏览器会以一个指向blob的引用为参数，去调用该回调函数，第二个参数以"image/png"这样的形式来指定图像类型，如果不指定，默认是“image/png”。最后一个参数是介于 0.0~1.0之间的值，表示 JEGP图片的质量。



可以通过canvas元素来获取canvas绘图环境对象的引用，以下列举canvas绘图环境对象提供的所有API:

canvas:指向该绘图环境所属的canvas对象，该属性常见的用途就是通过它来获取canvas元素的宽度和高度，分别调用context.canvas.width和context.canvas.height.

fillStyle:指定该绘图环境在后续的图形填充操作中所使用的颜色、渐变或图案。

font:设定在调用绘图环境对象的fillText或strokeText方法时，所使用的字型。

globalAlpha:全局透明度设置，它可以取0（完全透明）~1.0（完全不透明）之间的值，浏览器会将第一个像素的alpha值与该值相乘，在绘制图像时也是如此。

globalCompositeOperation：该值决定了浏览器将某个物体绘制在其他物体之上的，所采用的绘制方式。

lineCap：该值告诉浏览器如何绘制线段的端点，可以在以下三个值中指定一个 butt、round、square，默认值是butt.

lineWidth:该值是在canvas之中绘制线段的像素宽度，它必须是一个非负、非无穷的double值。默认值是0.

lineJoin:该值告诉浏览器在两条线段相交时如何来绘制焦点。可取的值有:bevel、round、miter。默认值是miter.

miterLimit:该值告诉浏览器如何绘制miter形式的线段焦点。

shadowBlur:该值决定了浏览器该如何延伸阴影效果。值越高，阴影效果延伸的就越远，该值不是指阴影的像素长度，而是代表高斯模糊方程式中的参数值。它必须是一个非负且无穷量的double值，默认值是0.

shadowColor:该值告诉浏览器使用何种颜色来绘制阴影。通常采用半透明作为该属性的值，以便让后面的背景能显示出来。

shadowOffsetX：以像素为单位，指定了阴影效果的水平方向偏移量。

shadowOffsetY: 以像素为单位，指定了阴影效果的垂直方向偏移量。

strokeStyle:指定了对路径进行描边进所用的绘制风格。该值可以被设置为某个颜色、渐变色或图案。

textAlign:决定了以fillText()或strokeText()方法进行绘制时，所画的文本的水平对齐方式。

textBaseline:决定了以fillText()或strokeText()方法时行绘制时，所画的文本的垂直对齐方式。



Canvas状态的保存与恢复


canvas的save()或restore()方法可以嵌套式调用

绘图环境的save()方法将当前的绘图环境堆栈顶部。
绘图环境的restore()方法则会从堆栈面部弹出一组状态，并据此恢复当前绘图环境的各个状态。

CanvasRenderingContext2D之中的与状态操作有关的方法

save: 将当前canvas状态推送到一个保存canvas状态的堆栈顶部。canvas状态包括了当前坐标变换信息、剪辑区域以及所有canvas绘图环境对象的属性
注：canvas状态并不包括当前的路径或位图。只能通过调用beginPath()来重置路径。至于位图它是canvas本身的一个属性，并不属于绘图环境对象。
请注意：尽管位图是canvas对象本身的属性，然而也可以通过绘图环境对象来访问它（在环境对象上调用getImageData（）方法）。

restore：将canvas状态堆栈面部的条目弹出。原来保存于栈顶的那一组状态，在弹出之后，就被设置成canvas当前的状态了。

在canvas对象上调用getBoundingClientRect()方法来获取canvas元素的边界框，该边界框的坐标是相对于整个窗口的



当前支持HTML5的浏览器都支持了clientX和clientY属性。




使用getImageData()与setImageData()方法来操作图像


使用getImageData()与setImageData()方法来保存与恢复绘图环境的绘图表面。一种常见的用途是通过它来实现图像滤镜：先获取图像数据，然后处理，最后将它恢复到canvas之上。

立即模式绘图系统

canvas元素采用“立即模式”来绘制图形的，这意味着它会立即将你所指定的内容绘制在canvas上。然后，它就会立刻忘记刚才绘制的内容，它表示canvas之中不会包含将要绘制的图形对象列表，比如SVG，则会维护一份所绘制图形对象的列表。这些绘图系统被叫做“保留模式”绘图系统。

离屏canvas

Canvas技术的另一项重要功能就是可以创建并操作离屏canvas.