HTML5 Canvas 属性、定义及方法

当你建立一个<canvas>元素后，就拥有了它的绘图上下文。

1、简单图形，整套的属性和方法专门用于绘制矩形：

一、fillStyle能够设置为CSS颜色、一个图案或一种颜色渐变。fillStyle默认是纯黑色，你能够设置成你喜欢的任意颜色。只要页面打开着，每一个绘图上下文都会记录本身的属性，除非你重置过它。

二、fillRect(x,y,width,height)绘制一个矩形，并以当前的fillStyle来填充。

三、srtokeStyle和fillStyle同样，能够设置为CSS颜色、一个图案或一种颜色渐变。

四、strokeRect（x,y,width,height）使用当前的storke style来绘制一个矩形，strokeRect并不填充中间区域，而只绘制矩形的边缘。

五、clearRect(x,y,width,height)清除指定矩形区域的像素。

2、路径

按照惯例，不论开始绘制何种图形，第一个须要调用的就是beginPath。这个简单的函数不带任何参数，它用来通知canvas将要开始绘制一个新的图形了。对于canvas来讲，beginPath函数最大的用处是canvas须要据此来计算图形的内部和外部的范围，以便完成后续的描边和填充。

路径会跟踪当前坐标，默认值是原点。canvas自己也跟踪当前坐标，不过可能经过绘制代码来修改。

每个canvas都有一个路径，定义路径就如同用铅笔做画。你能够任意做地画，但它不必定是最终做品的一部分，直到你拿起画笔沾上墨水描绘这条路径。

moveTo(x,y)：不绘制，只是将当前位置移动到新目标坐标（x,y），并做为线条开始点。

lineTo(x,y)：绘制线条到指定的目标坐标(x,y)，而且在两个坐标之间画一条直线。无论调用它们哪个，都不会真正画出图形，由于咱们尚未主，调用stroke（绘制）和fil（填充）函数。当前，只是在定义路径的位置，以便后面绘制时使用。

closePath()，这个函数跟lineTo很像，惟一的差异在于closePath会将路径的起始坐标自动做为目标坐标。closePath还会通知canvas当前绘制的图形已经闭合或者造成了彻底封闭的区域。起链接起点，闭合路径的做用。

3、文本

操做canvas文本的方式与操做其余路径对象的方式相同：能够描绘文本轮廓和填充文本内部，同时，全部可以应用于其余图形的变换和样式都能用于文本。context对象的文本绘制功能由两个函数组成：

fillText(text,x,y,maxwidth)

trokeText(text,x,y,maxwidth)

两个的参数彻底相同，必选参数包括文本参数以及用于指定文本位置的坐标参数。maxwidth是可选参数，用于限制字体大小，它会将文本字体强制收缩到指定尺寸。此外，还有一个measureText函数可供使用，该函数会返回一个度量对象，其包含了在当前context环境下指定文本的实际显示宽度。

为了保证文本在各浏览器下都能正常显示，在绘制上下文里有如下字体属性

一、font能够是CSS字体规则中的任何值。包括：字体样式、字体变种、字体大小与粗细、行高和字体名称。

二、textAlign控制文本的对齐方式。它相似于（但不彻底相同）CSS中的text-align。可能的取值为：start,end,left,right,和center.

三、textBaseline控制文本相对于起点的位置。能够取值有top,hanging,middle,alphabetic,ideographic和bottom。对于简单的英文字母，能够放心的使用top,middle或bottom做为文本基线。

4、颜色渐变

一旦咱们拥有了绘图上下文，就能够开始定义一个颜色渐变。渐变是两种或更多颜色的平滑过分。canvas的绘图上下文支持两种类型的渐变：

一、createLinearGradient(x0,y0,x1,x1)沿着直线从（x0,y0)至(x1,y1)绘制渐变。

二、createRadialGradient(x0,y0,r0,x1,y1,r1)沿着两个圆之间的锥面绘制渐变。前三个参数表明开始的圆，圆心为（x0,y0），半径为r0。最后三个参数表明结束的圆，圆心为(x1,y1)，半径为r1。

5、图片

canvas的绘图上下文中定义了几种绘制图片的方法：

一、drawIamge(image,dx,dy)接受一个图片，并将之画到canvaa中。给出的坐标（dx,dy）表明图片的左上角。好比，坐标（0，0）将把图片画到canvas的左上角。

二、drawIamge(image,dx,dy,dw,dh)接受一个图片，将其缩放为宽度dw和高度dh，而后把它画到canvas上的(dx,dy)位置。

三、drawIamge(image,sx,sy,sw,sh,dx,dy,dw,dh)接受一个图片，经过参数（sx,sy,sw,sh）指定图片裁剪的范围，缩放到(dw,dh)的大小，最后把它画到canvas上的(dx,dy)位置。

要在canvas上绘制图像，须要一先有一个图片。这个图片能够是已经存在的<img>元素，或者经过JS建立。不管采用哪一种方式，都须要在绘制canvas以前，彻底加载这张图片。浏览器一般会在页面脚本执行的同时异步加载图片。若是试图在图片未彻底加载以前就将其呈现到canvas上，那么canvas将不会显示任何图片。

6、渐变

渐变是指在颜色集上使用逐步抽样算法，并将结果应用于描边样式和填充样式中。使用渐变须要三个步骤：

（1）建立渐变对象

（2）为渐变对象设置颜色，指明过渡方式

（3）在context上为填充样式或者描边样式设置渐变

要设置显示哪一种颜色，在渐变对象上使用addColorStop函数便可。这个函数容许指定两个参数：颜色和偏移量。颜色参数是指开发人员但愿在偏移位置描边或填充时所使用的颜色。偏移量是一个0.0到1.0之间的数值，表明沿着渐变线渐变的距离有多远。

除了能够变换成其余颜色外，还能够为颜色设置alpha值（例如透明），而且alpha值也是能够变化的。为了达到这样的效果，须要使用颜色值的另外一种表示方法，例如内置alpha组件的CSSrgba函数.

除了线性渐变之外，HTML5 Canvas API还支持放射性渐变，所谓放射性渐变就是颜色会介于两个指定圆间的锥形区域平滑变化。放射性渐变和线性渐变使用的颜色终止点是同样的：参数以下：

createRadialGradient(x0,y0,r0,x1,y1,r1)

代码中，前三个参数表明以(x0,y0)为圆心，r0为半径，后三个参数表明以(x1,y1)为圆心，r1为半径的另外一个圆。渐变会在两个圆中间的区域出现。

7、背景图

直接绘制图像有不少用处，但在某些状况下，像CSS那样使用图片做为背景也很是有用。HTML5 Canvas API还支持图片平铺。调用createPattern函数。

8、绘制曲线（二次曲线）

quadraticCurveTo函数绘制曲线的起点是当前坐标，带有两组（x,y）参数，第二组是指曲线的终点。第一组表明控制点。所谓控制点位于曲线的旁边（不是曲线之上），其做用至关于对曲线产生一个拉力。经过调整控制点的位置，就能够改变曲线的曲率。

HTML5 Canvas API的其余曲线功能还涉及bezierCurveTo、arcTo和arc函数。这些函数经过多种控制点（如半径、角度等）让曲线更具可塑性。

9、缩放canvas对象

scale(x,y)，这个函数带有两个参数来分别表明在x,y两个维度的值。每一个参数在canvas显示图像的时候，向其传递在本方向轴上图像要放大（或者缩小）的量。若是x值为2，就表明所绘制图像中所有元素都会变成两倍宽。若是y值为0.5，绘制出来的图像所有元素都会变成以前的一半高。

注：要在原点执行图形和路径的变换操做，执行完成之后再统一平移。理由是绽开（scale）和旋转（rotate）等变换操做都是针对原点进行的。若是对一我的不在原点的图形进行旋转变换，那么rotate变换函数会将图形绕着原点旋转而不是在原地旋转。与之相似，若是进行缩放操做时没有将放置到合适的坐标上，那么全部路径坐标都会被同时缩放。取决于缩放比例的大小，新的坐标可能会所有超出canvas范围，进而给开发人员带来困惑，为何个人缩放操做会把图像删了？

10、变换

变换操做并不限于缩放和平移，咱们可使用函数context.rotate(angle)来旋转图像，甚至能够直接修改底层变换矩阵以完成一些高级操做，如剪裁图像的绘制路径。如：context.rotate(1.57)，旋转角度参数以弧度为单位。

beginPath()：开始

moveTo(x,y)：起点坐标

lineTo(x,y)：目标坐标

closePath()：链接起点，闭合路径

translate()：移动

rotate()：旋转

restore()：恢复

scale()：缩放

save()：保存

rotate(angle)：旋转图像

quadraticCurveTo()：绘制曲线

stroke()：绘制

strokeText()：描绘文本轮廓

strokeStyle()：颜色设置

strokeRect()：使用当前的storke style来绘制一个矩形，而只绘制矩形的边缘。

fill：填充

fillRect()：绘制一个矩形，并以当前的fillStyle来填充

fillStyle()：样式填充

fillText：填充文本内容

drawIamge()：图片填充

createPattern()：使用背景图片填充

addColorStop()：渐变填充

createRadialGradient()：放射性渐变

clearRect()：清除指定矩形区域的像素

.lineCap（butt | square | round）：指定线条末端的样式

.fillStyle：设置为CSS颜色、一个图案或一种颜色渐变

.lineWidth：线条宽度设置

.lineJoin(round)：修改当前形状中线段的链接方式，让拐角变得更圆滑

.shadowColor：任何css中的颜色值，可使用透明度(alpha)

.shadowOffsetX：像素值，值为正数，向右移动阴影;值为负数，向左移动阴影

.shadowOffsetY：像素值，值为正数，向下移动阴影;值为负数，向上移动阴影

.shadowBlur：高斯模糊值，值越大，阴影越模糊

 

closePath

摘自《HTML5高级程序设计》《HTML5揭秘》