HTML5 canvas 元素详细教程二

Posted on 2012-04-15 16:37 zljpp 阅读(152) 评论(0) 编辑收藏

HTML5 canvas 元素详细教程二：绘制图形。

$\" src=$ 在开始之前，我们需要对canvas 的网格（grid）或者坐标空间（coordinate space）进行探讨。在HTML5 canvas 元素详细教程一中有一个150像素宽， 150像素高的 canvas 对象的HTML模板。在画面上叠加上默认网格，如右图。通常网格的1个单元对应 canvas 上的1个像素。网格的原点是定位在左上角（坐标(0,0)）。画面里的所有物体的位置都是相对这个原点。这样，左上角的蓝色方块的位置就是距左边x像素和距上边Y像素（坐标(x, y)）。现在我们使用默认的状态来进行图形的绘制吧。

矩形 Rectangles

首先来详细介绍矩形的绘制吧，矩形有三个函数可以绘制的：

fillRect(x,y,width,height) : Draws a filled rectangle
strokeRect(x,y,width,height) : Draws a rectangular outline
clearRect(x,y,width,height) : Clears the specified area and makes it fully transparent

上面的函数都接受四个参数，X和Y用于指定矩形左上角也就是相对于原点的位置，width和height用于指定矩形的宽和高。这对于有基础的同学，还是非常简单的。下面，我们使用HTML5 canvas 元素详细教程一里提供的 draw() 函数，我们添加了上面的三个函数。

绘制矩形的例子 Rectangular shape example

运行的结果应该和右边图形一模一样的。fillRect 函数画了100x100黑色矩形，clearRect 函数清空了中间 60x60 大小的方块，然后strokeRect 函数又在清空了的空间画出了一个 50x50 的矩形边框。。

绘制路径 Drawing paths

绘制路径不像绘制矩形那要，需要一些额外的步骤，下面是需要使用的函数和步骤：

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)

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

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

把下面的moveTo 的使用示例代码粘贴到之前用过的 draw 函数内在看看效果吧。

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 方法的用法见下面。

绘制各种线条 Lines

在这里使用lineTo 方法来画直线。lineTo 方法接受终点的坐标（x，y）作为参数。起始坐标取决于前一路径，前一路径的终点即当前路径的起点，起始坐标也可以通过 moveTo 方法来设置。

lineTo(x, y)

lineTo 的使用示例

示例（如右图）画的是两个三角形，一个实色填充，一个勾边。首先调用 beginPath 方法创建一个新路径，然后用moveTo 方法将起始坐标移至想要的位置，然后画两条直线来构成三角形的两条边。

可以注意到 fill 和 strok 绘三角形的区别，使用 fill 路径会自动闭合，但使用 stroke 不会，如果不关闭路径，勾画出来的只有两边。

//填充三角形
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();

弧线 Arcs

arc 方法是来绘制弧线或圆。

arc(x, y, radius, startAngle, endAngle, anticlockwise)
arc(x, y, radius, startAngle, endAngle, anticlockwise)

该方法接受五个参数： 1、，y 是圆心坐标；
2、radius 是半径；
3、startAngle是起弧度（以 x 轴为基准）；
4、endAngle 是末弧度（以 x 轴为基准）；
5、anticlockwise 为 true 表示逆时针，反之顺时针。

警告：在 Firefox 的 beta 版本里，最后一个参数是 clockwise，而最终版本不是。因此如果是从 beta 升级至发行版需要做相应修改。

注意：arc 方法里用到的角度是以弧度为单位而不是度。度和弧度直接的转换可以用这个表达式：var radians = (Math.PI/180)*degrees;。

arc 的使用示例

这个示例比之前见到过的要复杂一些，画了12个不同的弧形，有不同夹角和填充状态的。如果我用上面画笑脸的方式来画这些弧形，那会是一大段的代码，而且，画每一个弧形时我都需要知道其圆心位置。像我这里画 90，180 和 270 度的弧形看起来不是很麻烦，但是如果图形更复杂一些,则实现起来会越来越困难。

这里使用两个 for 循环来画多行多列的弧形。每一个弧形都用 beginPath 方法创建一个新路径。然后为了方便阅读和理解，我把所有参数都写成变量形式。显而易见，x 和 y 作为圆心坐标。 radius 和 startAngle 都是固定，endAngle 从 180 度半圆开始，以 90 度方式递增至圆。anticlockwise 则取决于奇偶行数。

for (i=0;i<4;i++){
   for(j=0;j<3;j++){ //chinese_xu 原始代码
    ctx.beginPath();
    var x              = 25+j*50;               // x coordinate
    var y              = 25+i*50;               // y coordinate
    var radius         = 20;                    // Arc radius
    var startAngle     = 0;                     // Starting point on circle
    var endAngle       = Math.PI+(Math.PI*j)/2; // End point on circle ---//修复错误标点
    var anticlockwise = i%2==0 ? false : true; // clockwise or anticlockwise

    ctx.arc(x,y,radius,startAngle,endAngle, anticlockwise);

    if (i>1){
      ctx.fill();
    } else {
      ctx.stroke();
    }
}
}
//chinese_xu 原始代码并没有按照1/4圆递增来画。

//修改后输出4行4列，要把画布扩大到200*200观看
for (i=0;i<4;i++){
   for(j=0;j<4;j++){
    ctx.beginPath();
    var x              = 25+j*50;               // x coordinate
    var y              = 25+i*50;               // y coordinate
    var radius         = 20;                    // Arc radius
    var startAngle     = 0;                     // Starting point on circle
    var endAngle       = Math.PI*(2-j/2);   // End point on circle
    var anticlockwise = i%2==0 ? false : true; // clockwise or anticlockwise

    ctx.arc(x,y,radius,startAngle,endAngle, anticlockwise);

    if (i>1){
      ctx.fill();
    } else {
      ctx.stroke();
    }
}
}

贝塞尔和二次方曲线 Bezier and quadratic curves

贝塞尔曲线可以是二次和三次方的形式，常用于绘制复杂而有规律的形状。

quadraticCurveTo(cp1x, cp1y, x, y)
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

两行代码的区别见右图。它们都是一个起点一个终点（图中的蓝点），但二次方贝塞尔曲线只有一个（红色）控制点点）而三次方贝塞尔曲线有两个。

参数 x 和 y 是终点坐标，cp1x 和 cp1y 是第一个控制点的坐标，cp2x 和 cp2y 是第二个的。

使用二次方和三次方的贝塞尔曲线是相当有挑战的，因为不像在矢量绘图软件 Adobe Illustrator 里那样有即时的视觉反馈。因为用它来画复杂图形是比较麻烦的。但如果你有时间，并且最重要是有耐心，再复杂的图形都可以绘制出来的。下面我们来画一个简单而又规律的图形。

这些例子都比较简单。我们绘制的都是完整的图形。

quadraticCurveTo 的使用示例

// Quadratric curves example
ctx.beginPath();
ctx.moveTo(75,25);
ctx.quadraticCurveTo(25,25,25,62.5);
ctx.quadraticCurveTo(25,100,50,100);
ctx.quadraticCurveTo(50,120,30,125);
ctx.quadraticCurveTo(60,120,65,100);
ctx.quadraticCurveTo(125,100,125,62.5);
ctx.quadraticCurveTo(125,25,75,25);
ctx.stroke();

通过计算，可以由二次曲线的单个控制点得出相应三次方曲线的两个控制点，因此二次方转三次方是可能的，但是反之不然。仅当三次方程中的三次项为零是才可能转换为二次的贝塞尔曲线。通常地可以用多条二次方曲线通过细分算法来近似模拟三次方贝塞尔曲线。

bezierCurveTo 的使用示例

			// Bezier curves example
ctx.beginPath();
ctx.moveTo(75,40);
ctx.bezierCurveTo(75,37,70,25,50,25);
ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
ctx.bezierCurveTo(20,80,40,102,75,120);
ctx.bezierCurveTo(110,102,130,80,130,62.5);
ctx.bezierCurveTo(130,62.5,130,25,100,25);
ctx.bezierCurveTo(85,25,75,37,75,40);
ctx.fill();

矩形路径 Rectangles

除了上面提到的三个方法可以直接绘制矩形之外，我们还有一个 rect 方法是用于绘制矩形路径的。

rect(x, y, width, height)

它接受四个参数，x 和 y 是其左上角坐标，width 和 height 是其宽和高。

当它被调用时，moveTo 方法会自动被调用，参数为(0,0)，于是起始坐标又恢复成初始原点了。

综合 Making combinations

我们上面的示例都只用到了一种类型的路径，当然 canvas 不会限制所使用的路径类型的多少。

综合样例

在整个例子里，最值得注意的是 roundedRect 函数的使用和 fillStyle 属性的设置。自定义函数对于封装复杂图形的绘制是非常有用的。在这个例子里使用自定义函数就省掉了大约一半的代码。

在接下来的例子里会深入探讨 fillStyle 属性的使用。这里是用它来改变填充颜色，从默认的黑色，到白色，然后再回到黑色。

新用户注册刷新评论列表


只有注册用户登录后才能发表评论。




网站导航: 博客园 IT新闻知识库 C++博客博问管理

我的家园

导航

常用链接

我的收藏

最新评论