canvas常用方法总结

一、渲染上下文

var canvas = document.getElementById('tutorial');
//获得 2d 上下文对象
var ctx = canvas.getContext('2d');

二、绘制形状

1. 绘制矩形

   • fillRect(x, y, width, height)：绘制一个填充的矩形。
   • strokeRect(x, y, width, height)：绘制一个矩形的边框。
   • clearRect(x, y, widh, height)：清除指定的矩形区域，然后这块区域会变的完全透明。

2. 绘制路径

   • beginPath()新建一条路径，路径一旦创建成功，图形绘制命令被指向到路径上生成路径
   • moveTo(x, y)把画笔移动到指定的坐标(x, y)。相当于设置路径的起始点坐标。
   • closePath()：闭合路径之后，图形绘制命令又重新指向到上下文中
   • stroke()：通过线条来绘制图形轮廓（描边）
   • fill()：通过填充路径的内容区域生成实心的图形
   • lineTo(x,y)：绘制一条从当前位置到指定坐标的直线

3. 绘制圆弧

   • arc(x, y, r, startAngle, endAngle, anticlockwise): 以(x, y) 为圆心，以r 为半径，从 startAngle 弧度开始到endAngle弧度结束。
   • arcTo(x1, y1, x2, y2, radius): 根据给定的控制点和半径画一段圆弧，最后再以直线连接两个控制点。

4. 绘制贝塞尔曲线

   • quadraticCurveTo(cp1x, cp1y, x, y)：参数 1 和 2：控制点坐标，参数 3 和 4：结束点坐标。

5. 添加样式和颜色

   • fillStyle: 设置图形的填充颜色
   • strokeStyle：设置图形轮廓的颜色
   • lineWidth：线宽，默认是1
   • lineCap：设置线条末端样式。
     • butt：线段末端以方形结束
     • round：线段末端以圆形结束，
     • square：线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。
   • lineJoin：同一个 path 内，设定线条与线条间接合处的样式。
     • round 通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。 圆角的半径是线段的宽度。
     • bevel 在相连部分的末端填充一个额外的以三角形为底的区域， 每个部分都有各自独立的矩形拐角。
     • miter(默认) 通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。
   • setLineDash：制定虚线样式。

6. 绘制文本

   • fillText(text, x, y [, maxWidth])：在指定的 (x,y) 位置填充指定的文本，绘制的最大宽度是可选的。
   • strokeText(text, x, y [, maxWidth])：在指定的 (x,y) 位置绘制文本边框，绘制的最大宽度是可选的。

7. 绘制图片

   • drawImage(image, x, y, width, height)：绘制图片，参数分别为图片对象（可以new也可以是dom节点）、放置的x、y坐标，宽、高。

三、状态保存与恢复

1. save() 和 restore()：save 和 restore 方法是用来保存和恢复 canvas 状态的，都没有参数。

四、变形

1. translate(x, y)：移动 canvas 的原点到指定的位置
2. rotate(angle)：只接受一个参数：旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值。
3. scale(x, y)：scale方法接受两个参数。x,y 分别是横轴和纵轴的缩放因子，它们都必须是正值。值比 1.0 小表示缩 小，比 1.0 大则表示放大，值为 1.0 时什么效果都没有。