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.