Canvas基础知识总结之一

当前位置 : 首页 > 网页制作 > CSS > Canvas基础知识总结之一

Canvas基础知识总结之一

来源: 作者: 时间:2016-01-14 16:13
canvas的HTML语法: Canvas not supported 上面这句代码中内容部分所含的文本,这种文本的叫法后备内容,浏览器在不支持canvas元素的时候才会显示方该内容。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.

Tag:
网友评论

<