Canvas高级特性_H5之家 - 中国HTML5教程资源分享第一站

在我们的一系列文章中，我们上一次讲了Canvas元素，还有一些基本的操作。这篇文章中，我们再来介绍一些Canvas高级的方法。

准备工作

我们跟上一次用同样的一个HTML模板，所以打开你喜欢的编辑器，然后敲入下面的代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <!DOCTYPE html> <html> <head> <title>Canvas from scratch</title> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $(document).ready(function() { var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); }); </script> </head> <body> <canvas>  </canvas> </body> </html>

这段代码没什么特别的，就是一个Canvas元素，然后js代码会在元素加载完毕之后执行。

如何画一个圆

上一篇文章中，我们讲到了如何画一些基本的图形和路径，这里我们会深入一些，讲讲如何画圆。可能比你想象的要复杂一些，不过也不是多么的困难。

没有可以让你通过一句话就可以画出一个圆的代码，就像使用fillRect画一个矩形一样。你需要使用画path的方法，然后调用arc函数，圆就是一个360度的弧。这样做的原因是，圆实际上是一个比较复杂的图形，使用arc方法你可以做各种的操作，例如，你只想画一个半圆。你甚至也可以将arc方法和画直线的方法合并一起画一个四分之一圆或者扇形。

后面会介绍arc的原理，这里，我们先画一个圆：

1 2 3 4 context.context.Math.context.context.

这段代码就会在画布上画出来一个圆。

看起来挺简单的，不过我们得仔细说说。

arc方法有六个参数：

写成伪代码的形式就是：

1 arc(x,y,radius,startAngel,endAngel,anticlockwise);

前三个参数不用多说，大家都明白，最后一个也是，那么起始角度和结束角度是什么呢？

之前有提到，圆就是一个360度的弧。在canvas中，弧定义为从起始点开始算起，定义半径长度内的一段曲线。这段曲线从一个定义的起始角度（第四个参数）开始，然后开始走，直到到了定义的结束的那个角度（第五个参数），听起来挺简单。

也许一个图会比较有帮助。

看起来还蛮复杂，不过相对于文字还是清晰了不少吧。

canvas中的角度

这个时候应该提一下，Canvas中的角度是用弧度定义的，而不是度数。这就意味着角度从0开始到2π结束。从右手边开始计算，可以看下图：

如果你不喜欢弧度，那么你也可以通过下面的方法将度数转为弧度：

1 2 radians

这个公式就很简单啦。

贝塞尔曲线

弧线挺有意思的，不过在canvas里面他们的限制还比较大。如果你想画一些复杂的东西，那么可以使用贝塞尔曲线的方法quadraticCurveTo和bezierCurveTo。通过这些方法就可以画一些半径没有在中央的曲线以及那些由多个曲线组成的复杂的曲线path。

贝塞尔曲线通过控制点来决定如何画曲线。例如，quadraticCurveTo有一个控制点，bezierCurveTo有两个控制点，看看下面这个图，看看怎么通过这些控制点来画曲线。

如果你用过Adobe Illustrator这种通过矢量来画图的工具，你就可能对这两个曲线比较熟悉。

我们先看看怎么画贝塞尔曲线吧：

1 2 3 4 5 ctx.ctx.ctx.ctx.ctx.

这就会画出来下面这样一条曲线。

quadraticCurveTo方法有四个参数：

写成伪代码就是：

1 quadraticCurveTo(cpx,xpy,x,y);

曲线的开始位置就是当前的路径所在位置。例如，在上面的代码中，通过moveTo方法来确定开始位置。
我们在上面的基础上画一个贝塞尔曲线，看看代码：

1 2 3 4 5 ctx.ctx.ctx.ctx.ctx.

这段代码就会画出这样的图：

bezierCurveTo方法有六个参数：

写成伪代码就是：

1 bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

可能这样看着没什么，但是当组合了多个路径，或者嵌套了好几次之后，结果就炫了。你可以用这些方法在Canvas上画出任何疯狂的东西出来。

你可能想要一个可以让你的Adobe Illustrator图变成canvas代码的东西，如果有非常棒，可以节省很多时间了。

绘画状态

在上一讲中，我们提到了如何更改填充和边框的样式。需要注意的一点是，如果你想要原来的笔画的粗细和颜色，那么需要再手动改回来。不过，还有更好的办法，称为绘画状态。

Canvas中的绘画状态是指你可以保存你当前的绘画样式，之后还能再改回来。这是一个稍微有点绕的感觉，但是在理解之后还是能做很多事情的。事实上，会装状态中保存了很多关于canvas的信息，比如转换矩阵，剪辑区域，还有下面这些属性：globalAlpha,globalCompositeOperation, strokeStyle, fillStyle, lineWidth,lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY,shadowBlur, shadowColor, font, textAlign, 以及textBaseline。可能很多属性都还没用过，RockUX会在后面的文章中讲到。

保存绘画状态

使用绘画状态很简单，但是理解上还得花点时间。将上一节的代码替换如下：