Canvas教程：绘制图形

网格

    在真正开始之前，我们需要先探讨 canvas 的网格（grid）或者坐标空间（coordinate space）。在前一页的HTML模板里有一个150像素宽， 150像素高的 canvas 对象。我在画面上叠加上默认网格，如图。通常网格的1个单元对应 canvas 上的1个像素。网格的原点是定位在左上角（坐标(0,0)）。画面里的所有物体的位置都是相对这个原点。这样，左上角的蓝色方块的位置就是距左边x像素和距上边Y像素（坐标(x, y)）。后面的教程中我们将学会如何把移动原点，旋转以及缩放网格。不过现在我们会使用默认的状态。

 

绘制图形

    不像 SVG，canvas 只支持一种基本形状——矩形，所以其它形状都是有一个或多个路径组合而成。还好，有一组路径绘制函数让我们可以绘制相当复杂的形状。

 

矩形

    我们首先看看矩形吧，有三个函数用于绘制矩形的：

fillRect(x,y,width,height);  //绘制一个实心矩形
strokeRect(x,y,width,height);  //绘制一个矩形轮廓
clearRect(x,y,width,height);  //清空特定区域并使其完全透明

    它们都接受四个参数， x 和 y 指定矩形左上角(相对于原点)的位置，width 和 height 是矩形的宽和高。好，实战一下吧。

    下面就是上页模板里的 draw() 函数，但添加了上面的三个函数。

 

绘制矩形的例子

function draw(){
  var canvas = document.getElementById('tutorial');
  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 函数画了一个大的黑色矩形（100x100），clearRect 函数清空了中间 60x60 大小的方块，然后strokeRect 函数又在清空了的空间内勾勒出一个 50x50 的矩形边框。在接下去的页面里，我们会看到和 clearRect 函数差不多另外两个方法，以及如何去改变图形的填充和边框颜色。

    与下一节的路径函数不一样，这三个函数的效果会立刻在 canvas 上反映出来。

 

绘制路径

    不像画矩形那样的直截了当，绘制路径是需要一些额外的步骤的。

beginPath();
closePath();
stroke();
fill();

    第一步是用 beginPath 创建一个路径。在内存里，路径是以一组子路径（直线，弧线等）的形式储存的，它们共同构成一个图形。每次调用 beginPath，子路径组都会被重置，然后可以绘制新的图形。

    第二步就是实际绘制路径的部分，很快我们就会看到。

    第三步是调用 closePath 方法，它会尝试用直线连接当前端点与起始端点来关闭路径，但如果图形已经关闭或者只有一个点，它会什么都不做。这一步不是必须的。

    最后一步是调用 stroke 或 fill 方法，这时，图形才是实际的绘制到 canvas 上去。stroke 是绘制图形的边框，fill 会用填充出一个实心图形。

    注意：当调用 fill 时，开放的路径会自动闭合，而无须调用 closePath 。

    画一个简单图形（如三角形）的代码如下。

 

ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.fill();

 

 

moveTo

    moveTo 是一个十分有用的方法，虽然并不能用它来画什么，但却是绘制路径的实用方法的一部分。你可以把它想象成是把笔提起，并从一个点移动到另一个点的过程。

    它接受 x 和 y （新的坐标位置）作为参数。

    当 canvas 初始化或者调用 beginPath 的时候，起始坐标设置就是原点(0,0)。大多数情况下，我们用 moveTo 方法将起始坐标移至其它地方，或者用于绘制不连续的路径。看看下面的笑脸，红线就是使用 moveTo 移动的轨迹。

试一试下面的代码，粘贴到之前用过的 draw 函数内在看看效果吧。

 

moveTo 的使用示例

ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false);   // Mouth (clockwise)
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true);  // Left eye
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true);  // Right eye
ctx.stroke();

//thegoneheart 完整例子

ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false);   // Mouth (clockwise)
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true);  // Left eye
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true);  // Right eye
ctx.stroke();

ctx.beginPath();
ctx.moveTo(40,75);
ctx.lineTo(60,65);
ctx.lineTo(90,65);
ctx.moveTo(110,75);
ctx.lineTo(125,75);
ctx.stroke();

注意：你可以注释 moveTo 方法来观察那些连接起来的线。

注意：arc 方法的用法见下面。