HTML5:Canvas-绘制图形

到本文的最后，你将学会如何绘制矩形，三角形，直线，圆弧和曲线，变得熟悉这些基本的形状。绘制物体到Canvas前，需掌握路径，我们看看到底怎么做。

栅格

在我们开始画图之前，我们需要了解一下画布栅格（canvas grid）以及坐标空间。上一页中的HTML模板中有个宽150px, 高150px的canvas元素。如右图所示，canvas元素默认被网格所覆盖。通常来说网格中的一个单元相当于canvas元素中的一像素。栅格的起点为左上角（坐标为（0,0））。所有元素的位置都相对于原点定位。所以图中蓝色方形左上角的坐标为距离左边（X轴）x像素，距离上边（Y轴）y像素（坐标为（x,y））。在课程的最后我们会平移原点到不同的坐标上，旋转网格以及缩放。现在我们还是使用原来的设置。

绘制矩形

不同于SVG，HTML中的元素canvas只支持一种原生的图形绘制：矩形。所有其他的图形的绘制都至少需要生成一条路径。不过，我们拥有众多路径生成的方法让复杂图形的绘制成为了可能。

首先，我们回到矩形的绘制中。canvas提供了三种方法绘制矩形：

fillRect(x, y, width, height): 绘制一个填充的矩形
strokeRect(x, y, width, height): 绘制一个矩形的边框
clearRect(x, y, width, height): 清除指定矩形区域，让清除部分完全透明。

上面提供的方法之中每一个都包含了相同的参数。x与y指定了在canvas画布上所绘制的矩形的左上角（相对于原点）的坐标。width和height设置矩形的尺寸。

下面的draw() 函数是前一页中取得的，现在就来使用上面的三个函数。

矩形例子

 function draw() {

  var canvas = document.getElementById('canvas');

  if (canvas.getContext) {

  var ctx = canvas.getContext('2d');

  ctx.fillRect(25,25,100,100);

  ctx.clearRect(45,45,60,60);

  ctx.strokeRect(50,50,50,50);

  }

 }

输出如下：

fillRect()函数绘制了一个边长为100px的黑色正方形。clearRect()函数从正方形的中心开始擦除了一个60*60px的正方形，接着strokeRect()在清除区域内生成一个50*50的正方形边框。

接下来我们能够看到clearRect()的两个可选方法，然后我们会知道如何改变渲染图形的填充颜色及描边颜色。

不同于下一节所要介绍的路径函数（path function），以上的三个函数绘制之后会马上显现在canvas上，即时生效。

ps：你也可以设置边框的大小

lineWidth = 2;

但是得注意,需要在strokeRect的前面使用否则不会显示出来

绘制路径

图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。使用路径绘制图形需要一些额外的步骤。

首先，你需要创建路径起始点。
然后你使用画图命令去画出路径。
之后你把路径封闭。
一旦路径生成，你就能通过描边或填充路径区域来渲染图形。

以下是所要用到的函数：

beginPath(): 新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
closePath(): 闭合路径之后图形绘制命令又重新指向到上下文中。
stroke(): 通过线条来绘制图形轮廓。
fill(): 通过填充路径的内容区域生成实心的图形。

生成路径的第一步叫做beginPath()。本质上，路径是由很多子路径构成，这些子路径都是在一个列表中，所有的子路径（线、弧形、等等）构成图形。而每次这个方法调用之后，列表清空重置，然后我们就可以重新绘制新的图形。

注意：当前路径为空，即调用beginPath()之后，或者canvas刚建的时候，第一条路径构造命令通常被视为是moveTo（），无论实际上是什么。出于这个原因，你几乎总是要在设置路径之后专门指定你的起始位置。

第二步就是调用函数指定绘制路径，本文稍后我们就能看到了。

第三，就是闭合路径closePath(),不是必需的。这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。如果图形是已经闭合了的，即当前点为开始点，该函数什么也不做。

注意：当你调用fill()函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合。

　我们来看一个例子用canvas画三角形

 <html>

   <head>

     <title>Canvas tutorial</title>

     <script type="text/javascript">

       function draw(){

         var canvas = document.getElementById('tutorial');

         if (canvas.getContext){

           var ctx = canvas.getContext('2d');

           ctx.beginPath();

           ctx.moveTo(47,60);

           ctx.lineTo(80,20);

           ctx.lineTo(117,60);

           ctx.fill();

         }

       }

     </script>

     <style type="text/css">

       canvas { border: 1px solid black; }

     </style>

   </head>

   <body onload="draw();">

     <canvas id="tutorial" width="150" height="150"></canvas>

   </body>

 </html>

显示如下的三角形

moveTo（47，60）就是从栅格里面找到宽度47,高度60的位置（起点位置）

lineTo(80，20) 就是从栅格里面找到宽度80，高度20的位置（终点位置）然后起点连接这个位置

lineTo(117,60);就是从栅格里面找到宽度117，高度60的位置,在连接这个位置就形成了三角形

再看下面的例子：

 function draw() {

  var canvas = document.getElementById('canvas');

  if (canvas.getContext){

  var ctx = canvas.getContext('2d');

  // 填充三角形

  ctx.beginPath();

  ctx.moveTo(25,25);

  ctx.lineTo(105,25);

  ctx.lineTo(25,105);

  ctx.fill();

  // 描边三角形

  ctx.beginPath();

  ctx.moveTo(125,125);

  ctx.lineTo(125,45);

  ctx.lineTo(45,125);

  ctx.closePath();

  ctx.stroke();

  }

 }

这里从调用beginPath()函数准备绘制一个新的形状路径开始。然后使用moveTo()函数移动到目标位置上。然后下面，两条线段绘制后构成三角形的两条边。

你会注意到填充与描边三角形步骤有所不同，

因为路径使用填充（filled）时，路径自动闭合，使用描边（stroked）则不会闭合路径。如果没有添加闭合路径closePath()到描述三角形函数中，则只绘制了两条线段，并不是一个完整的三角形。

圆弧

绘制圆弧（圆上任意两点就是圆弧）或者圆,我们使用arc方法,当前可以使用arcTo,不过相对arc更加简单上手度高

arc（x, y, radius, startAnglem endAngle, anticlockwise）

arc有六个参数

x，就是x轴

y，就是y轴

radius,就是半径

startAnglem 开始的弧度

endAngle 结束的弧度

anticlockwise 可选,默认按顺时针,可选逆时针

先来个例子：

 <html>

   <head>

     <title>Canvas tutorial</title>

     <script type="text/javascript">

       function draw(){

         var canvas = document.getElementById('tutorial');

         if (canvas.getContext){

           var ctx = canvas.getContext('2d');

           ctx.arc(,,,, Math.PI);

           ctx.stroke();

         }

       }

     </script>

     <style type="text/css">

       canvas { border: 1px solid black; }

     </style>

   </head>

   <body onload="draw();">

     <canvas id="tutorial" width="" height=""></canvas>

   </body>

 </html>

显示如下：

上面是180°,下面只要180° * 2 = 360°就可以画圆了如下

这里需要注意的是这里的arc()函数的角度单位是弧度,不是度数

角度与弧度的js表达式:radians=(Math.PI/180)*degrees。

360°换成弧度就是这样

360 * Math.PI/180