7.2 绘制基本形状

画布canvas结合JavaScript不但可以绘制简单的矩形，还可以绘制一些其他的常见图形，如直线、圆等。

7.2.1 绘制圆形

基于canvas的绘图并不是直接在<canvas>标记所创建的绘图画面上进行各种绘图操作，而是依赖画面所提供的渲染上下文（Rendering Context），所有的绘图命令和属性都定义在渲染上下文中。在通过canvas id获取相应的DOM对象之后，首先要做的事情就是获取渲染上下文对象。渲染上下文与canvas一一对应，无论对同一canvas对象调用几次getContext()函数，都将返回同一个上下文对象。

在画布中绘制圆形，可能要涉及下面几个函数，如表7-2所示。

表7-2 绘制函数

路径是绘制自定义图形的好方法，在canvas中通过beginPath()函数开始绘制路径，这个时候就可以绘制直线、曲线等，绘制完成后调用fill()和stroke()函数完成填充和设置边框，最后通过closePath()函数结束路径的绘制。

【例7.2】（实例文件：ch07\7.2.html）

在上面的JavaScript代码中，首先使用beignPath函数开启一个路径，然后绘制一个圆形，最后关闭这个路径并填充。

在IE 11.0中浏览效果如图7-2所示，可以看到网页中，在矩形边框中显示了一个黄色的圆。

图7-2 绘制椭圆

7.2.2 使用moveTo与lineTo绘制直线

在每个canvas实例对象中都拥有一个path对象，创建自定义图形的过程就是不断对path对象操作的过程。每当开始一次新的图形绘制任务，都需要先使用beginPath()函数来重置path对象至初始状态，进而通过一系列对moveTo/lineTo等画线函数的调用，绘制期望的路径。其中moveTo(x, y)函数设置绘图起始坐标，而lineTo(x,y)等画线函数可以从当前起点绘制直线、圆弧以及曲线到目标位置。最后一步，也是可选的步骤，是调用closePath()函数将自定义图形进行闭合，该函数将自动创建一条从当前坐标到起始坐标的直线。

绘制直线常用的函数是moveTo和lineTo，其含义如表7-3所示。

表7-3 绘制函数

【例7.3】（实例文件：ch07\7.3.html）

上面代码中，使用moveTo函数定义一个坐标位置为（10,10），下面以此坐标位置为起点绘制两条不同的直线，并使用lineWidth设置直线的宽度，使用strokeStyle设置直线的颜色，使用lineTo设置两条不同直线的结束位置。

在IE 11.0中浏览效果如图7-3所示，可以看到网页中绘制了两条直线，这两条直线在某一点交叉。

图7-3 绘制直线

7.2.3 使用bezierCurveTo绘制贝济埃曲线

在数学的数值分析领域中，贝济埃曲线（Bézier曲线）是电脑图形学中相当重要的参数曲线。更高维度的广泛化贝济埃曲线就称作贝济埃曲面，其中贝济埃三角是一种特殊的实例。

bezierCurveTo()表示为一个画布的当前子路径添加一条三次贝塞尔曲线。这条曲线的开始点是画布的当前点，结束点是(x, y)。两条贝塞尔曲线控制点(cpX1, cpY1)和(cpX2, cpY2)定义了曲线的形状。这个方法返回时，当前位置为(x, y)。

方法bezierCurveTo具体格式如下：

bezierCurveTo(cpX1, cpY1, cpX2, cpY2, x, y)

其参数的含义如表7-4所示。

表7-4 参数的含义

【例7.4】（实例文件：ch07\7.4.html）

上面函数draw代码中，首先使用语句“fillRect(0,0,400,300)”绘制了一个矩形，其大小和画布相同，其填充颜色为浅青色。下面定义几个变量，用于设置曲线的坐标位置，在for循环中使用bezierCurveTo绘制贝济埃曲线。

在IE 11.0中浏览效果如图7-4所示，可以看到网页中显示了一个贝济埃曲线。

图7-4 贝济埃曲线