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

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

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

<!DOCTYPE html>

<html>
    <head>
        <title>Canvas from scratch</title>
        <meta charset="utf-8">

        <script src=""></script>

         <script>
             $(document).ready(function() {
                 var canvas = document.getElementById("myCanvas");
                 var ctx = canvas.getContext("2d");
             });
         </script>
     </head>

     <body>
         <canvas id="myCanvas" width="500" height="500">
             
         </canvas>
     </body>
</html>

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

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

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

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

context.beginPath();
context.arc(100,100,50,0,Math.PI*2,false);
context.closePath();
context.fill();

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

自助建站网站制作网站开发

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

arc方法有六个参数：

第一个是原点的x坐标
第二个是原点的y坐标
第三个是圆的半径
第四个是起始的角度
第五个是结束的角度
第六个是画的方向（true是逆时针，false是顺时针）
写成伪代码的形式就是：

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

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

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

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

网站超市免费建站自选网站

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

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

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

var degrees = 270;
var radians = degrees * (Math.PI / 180);

这个公式就很简单啦。

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

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

网站开发网站建设网页制作

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

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

ctx.lineWidth = 8;
ctx.beginPath();
ctx.moveTo(50,150);
ctx.quadraticCurveTo(250,50,450,150);
ctx.stroke();

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

B2B商贸网上商城人才招聘

quadraticCurveTo方法有四个参数：

第一个是控制点的x坐标
第二个是控制点的y坐标
第三个参数是结束点的x坐标
第四一个是结束点的y坐标
写成伪代码就是：

quadraticCurveTo(cpx,xpy,x,y);

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

ctx.lineWidth = 8;
ctx.beginPath();
ctx.moveTo(50,150);
ctx.bezierCurveTo(150,50,350,250,450,150);
ctx.stroke();

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

B2B商贸网上商城人才招聘

bezierCurveTo方法有六个参数：