深入了解canvas标签（2）——绘制图形

最新推荐文章于 2022-05-19 12:55:01 发布

load_life

最新推荐文章于 2022-05-19 12:55:01 发布

阅读量550

点赞数

分类专栏： html5 文章标签：图形 combinations firefox safari adobe 浏览器

html5 专栏收录该内容

122 篇文章 0 订阅

订阅专栏

网格

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

绘制图形

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

矩形

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

Code:

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是矩形的宽和高。好，实战一下吧。

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

绘制矩形的例子

观看示例

Code:

function draw(){ var canvas = document.getElementById_x_x_x('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 创建一个路径。在内存里，路径是以一组子路径（直线，弧线等）的形式储存的，它们共同构成一个图形。每次调用beginPath，子路径组都会被重置，然后可以绘制新的图形

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

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

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

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

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

Code:

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

moveTo

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

Code:

moveTo(x, y)

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

当 canvas 初始化或者调用 beginPath 的时候，起始坐标设置就是原点(0,0)。大多数情况下，我们用 moveTo方法将起始坐标移至其它地方，或者用于绘制不连续的路径。看看右边的笑脸，红线就是使用 moveTo 移动的轨迹。
试一试下面的代码，粘贴到之前用过的 draw 函数内在看看效果吧。

moveTo 的使用示例

观看示例

Code:

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方法来观察那些连接起来的线。

绘制各种线条 Lines

我们用 lineTo 方法来画直线

Code:

lineTo(x, y)

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

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

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

观看示例

Code:

// 填充三角形
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方法来绘制弧线或圆。标准说明中还包含 arcTo 方法，当前 Safari 是支持的，但基于 Gecko的浏览器还未实现。

Code:

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

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

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

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

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

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

观看示例

Code:

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

接下来要介绍的路径是贝塞尔曲线，它可以是二次和三次方的形式，一般用于绘制复杂而有规律的形状。

Code:

quadraticCurveTo(cp1x, cp1y, x, y) // BROKEN in Firefox 1.5 (see work around below)
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

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

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

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

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

quadraticCurveTo 的使用示例

查看示例

Code:

// 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的使用示例

查看示例

Code:

// 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();

Firefox 1.5 quadraticCurveTo() bug 的应对方案

在 Firefox 1.5 里，quadatricCurveTo() 的实现是有 bug 的，它不是直接绘制二次方曲线，而是调用bezierCurveTo() ，其中两个控制点都是二次方曲线的那个单控制点。因此，它会绘制出不正确的曲线。如果必须使用到quadraticCurveTo()，你需要自行去将二次方曲线转换成三次方的，这样就可以用 bezierCurveTo()方法了。

Code:

var currentX, currentY; // set to last x,y sent to lineTo/moveTo/bezierCurveTo or quadraticCurveToFixed()
function quadraticCurveToFixed( cpx, cpy, x, y ) {
var cp1x = currentX + 2.0/3.0*(cpx - currentX);
var cp1y = currentY + 2.0/3.0*(cpy - currentY);
var cp2x = cp1x + (x - currentX)/3.0; var cp2y = cp1y + (y - currentY)/3.0;
// and now call cubic Bezier curve to function
bezierCurveTo( cp1x, cp1y, cp2x, cp2y, x, y ); currentX = x;
currentY = y; }