HTML5 canvas绘图基本使用方法

>

绘制线段moveTo()和lineTo()

如果没有通过moveTo()特别指定，lineTo()的起始点是以上一个点为准。因此，如果需要重新选择起始点，则需要通过moveTo()方法。如果需要对不同的线段设置样式，则需要通过context.beginPath()重新开启一条路径，下面是一个示例：

绘制矩形rect()、fillRect()和strokeRect()

• context.rect( x , y , width , height )：只定义矩形的路径；
• context.fillRect( x , y , width , height )：直接绘制出填充的矩形；
• context.strokeRect( x , y , width , height )：直接绘制出矩形边框；

这里需要说明两点：第一点就是stroke()和fill()绘制的前后顺序，如果fill()后面绘制，那么当stroke边框较大时，会明显的把stroke()绘制出的边框遮住一半；第二点：设置fillStyle或strokeStyle属性时，可以通过“rgba(255,0,0,0.2)”的设置方式来设置，这个设置的最后一个参数是透明度。

另外还有一个跟矩形绘制有关的：清除矩形区域：context.clearRect(x,y,width,height)。 
接收参数分别为：清除矩形的起始位置以及矩形的宽和长。 
在上面的代码中绘制图形的最后加上：

可以得到以下效果： 

绘制五角星

通过对五角星分析，我们可以确定各个顶点坐标的规律，这里需要注意的一点是：在canvas中，Y轴的方向是向下的。 

相应代码如下：

最后效果： 

线条属性

除了上面用到的lineWidth属性，线条还有以下几个属性：

• lineCap 属性设置或返回线条末端线帽的样式，可以取以下几个值： 
  “butt” 向线条的每个末端添加平直的边缘（默认）； 
  “round” 向线条的每个末端添加圆形线帽； 
  “square” 向线条的每个末端添加正方形线帽。

• lineJoin 属性当两条线交汇时设置或返回所创建边角的类型，可以取以下几个值： 
  “miter” 创建尖角(默认)； 
  “bevel” 创建斜角； 
  “round” 创建圆角。

• miterLimit 属性设置或返回最大斜接长度（默认为10）。斜接长度指的是在两条线交汇处内角和外角之间的距离。只有当 lineJoin 属性为 “miter” 时，miterLimit 才有效。

各属性的不同取值的效果如下： 

填充样式

前面用到的fillStyle和strokeStyle除了设置颜色外，还能设置其他填充样式，这里以fillStyle为例：

• 线性渐变 
  使用步骤 
  （1）var grd = context.createLinearGradient( xstart , ystart, xend , yend )创建一个线性渐变，设置起始坐标和终点坐标； 
  （2）grd.addColorStop( stop , color )为线性渐变添加颜色，stop为0~1的值； 
  （3）context.fillStyle=grd将赋值给context。

• 径向渐变 
  该方法与线性渐变使用方法类似，只是第一步接收的参数不一样 
  var grd = context.createRadialGradient(x0 , y0, r0 , x1 , y1 , r1 );接收起始圆心的坐标和圆半径以及终点圆心的坐标和圆的半径。

• 位图填充 
  createPattern( img , repeat-style )使用图片填充，repeat-style可以取repeat、repeat-x、repeat-y、no-repeat。

效果如下： 

图形变换

平移：context.translate(x,y)，接收参数分别为原点在x轴方向平移x，在y轴方向平移y。

缩放：context.scale(x,y)，接收参数分别为x坐标轴按x比例缩放，y坐标轴按y比例缩放。

旋转：context.rotate(angle)，接收参数是坐标轴旋转的角度。

context.save();context.restore();

效果如下： 

另外一个跟图形变换相关的是：矩阵变换 ：context.transform(a, b, c, d, e, f, g)。参数的含义如下： 
a 水平缩放 ( 默认为1 ) 
b 水平倾斜 ( 默认为 0 ) 
c 垂直倾斜 ( 默认为 0 ) 
d 垂直缩放 ( 默认为1 ) 
e 水平位移 ( 默认为 0 ) 
f 垂直位移 ( 默认为 0 ) 
读者可以自行验证其各个参数的效果，这里就不一一介绍了。

绘制曲线

跟绘制曲线的有四个函数，分别是：

• context.arc(x,y,r,sAngle,eAngle,counterclockwise);用于创建弧/曲线（用于创建圆或部分圆）。接收的参数含义： 
  | 参数 | 含义 | 
  | :————- |:————-| 
  | x | 圆的中心的 x 坐标 | 
  |y|圆的中心的 y 坐标| 
  |r|圆的半径| 
  |sAngle|起始角，以弧度计（弧的圆形的三点钟位置是 0 度）| 
  |eAngle|结束角，以弧度计| 
  |counterclockwise|可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针| 
  下面是几个arc()函数的几个示例：

效果如下： 

• context.arcTo(x1,y1,x2,y2,r); 在画布上创建介于两个切线之间的弧/曲线。接收的参数含义：

  参数	含义
  x1	弧的控制点的 x 坐标
  y1	弧的控制点的 y 坐标
  x2	弧的终点的 x 坐标
  y2	弧的终点的 y 坐标
  r	弧的半径

  这里需要注意的是arcTo函数绘制的曲线的起始点需要通过moveTo(）函数来设置，下面利用arcTo函数绘制一个圆角矩形：

效果如下： 

• context.quadraticCurveTo(cpx,cpy,x,y);绘制二次贝塞曲线，参数含义如下：

  参数	含义
  cpx	贝塞尔控制点的 x 坐标
  cpy	贝塞尔控制点的 y 坐标
  x	结束点的 x 坐标
  y	结束点的 y 坐标

  曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。

• context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); 绘制三次贝塞尔曲线，参数如下：

  参数	含义
  cp1x	第一个贝塞尔控制点的 x 坐标
  cp1y	第一个贝塞尔控制点的 y 坐标
  cp2x	第二个贝塞尔控制点的 x 坐标
  cp2y	第二个贝塞尔控制点的 y 坐标
  x	结束点的 x 坐标
  y	结束点的 y 坐标

文字渲染

与文本渲染有关的主要有三个属性以及三个方法：

上述的属性和方法的基本用法如下：

效果如下： 

其他属性和方法

阴影绘制：

• shadowColor 设置或返回用于阴影的颜色。
• shadowBlur 设置或返回用于阴影的模糊级别（数值越大越模糊）。
• shadowOffsetX 设置或返回阴影与形状的水平距离。
• shadowOffsetY 设置或返回阴影与形状的垂直距离。

我们为之前绘制的五角星添加一下阴影

效果如下： 

图形组合：

• globalAlpha： 设置或返回绘图的当前 alpha 或透明值 
  该方法主要是设置图形的透明度，这里就不具体介绍。

• globalCompositeOperation： 设置或返回新图像如何绘制到已有的图像上，该方法有以下属性值：

下面是一个小示例，可以通过点击改变组合效果：

读者可以点击标签来观察不同的组合效果，效果如下： 

剪辑区域：

clip()方法从原始画布中剪切任意形状和尺寸。 
提示：一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。您也可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 restore() 方法） 
以下是用一个圆去截取一个矩形的示例：

除了上述的属性的和方法，还有以下等方法：

drawImage()： 向画布上绘制图像、画布或视频。

toDataURL() ：保存图形

isPointInPath()： 如果指定的点位于当前路径中，则返回 true，否则返回 false。

这里就不逐个举例说明了。