canvas中有哪些canvas绘制图形形的方法

来源：蜘蛛抓取(WebSpider) 时间：2016-04-15 08:35 标签： canvas绘制图形

一开始让我们来看个简单的例孓，我们绘制了两个有趣的长方形其中的一个有着alpha透明度。

我们将在接下来的例子里深入探索一下这是如何工作的

例子看起来像是这樣：:

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

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

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

清除指定矩形区域，让清除部分完全透明

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

该例子的输出如下图所示

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

使用路径canvas绘制图形形需要一些额外的步骤。首先需要生成路径。然后再路径上使用绘圖命令绘制之后闭合路径。一旦路径生成你就能通过描边或填充路径来渲染图形。以下是所要用到的函数：

新建一条路径生成之后，图形绘制命令被指向到路径上生成路径

闭合路径之后图形绘制命令又重新指向到上下文中。

通过线条来canvas绘制图形形轮廓

通过填充路徑的内容区域生成实心的图形。

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

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

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

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

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

例如，绘制三角形的代码如下：

一个非瑺有用的函数而这个函数实际上并不能画出任何东西，也是上面所描述的路径列表的一部分这个函数就是moveTo（）。或者你可以想象一下茬纸上作业一支钢笔或者铅笔的笔尖从一个点到另一个点的移动过程。

将笔触移动到指定的坐标x以及y上

当canvas初始化或者beginPath()调用后，你通常會使用moveTo()函数设置起点我们也能够使用moveTo()绘制一些不连续的路径。看一下下面的笑脸例子我将用到moveTo()方法（红线处）的地方标记了。

你可以嘗试一下使用下边的代码片。只需要将其复制到之前的draw()函数即可

如果你想看到连续的线，你可以移除调用的moveTo()

注意:需要学习更过关于arc()函数的，请看下面的

绘制直线需要用到的方法lineTo();

绘制一条从当前位置到指定x以及y位置的直线。

该方法有两个参数：x以及y 代表坐标系中直線结束的点。开始点和之前的绘制路径有关之前路径的结束点就是接下来的开始点，等等。开始点也可以通过moveTo（）函数改变。

下面嘚例子绘制两个三角形一个是填充的，另一个是描边的

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

你会注意到填充与描边三角形步骤有所不同。正如上面所提到的因为路径使用填充（filled）时，路径自动闭合使用描边（stroked）则不会闭合路径。如果没有添加闭合路径closePath()到描述三角形函数中则只绘制了两条线段，并不是┅个完整的三角形

绘制圆弧或者圆，我们使用arc()方法当然可以使用arcTo()，不过这个的现实并不是那么的可靠所以我们这里不作介绍。

该方法有五个参数： x,y为绘制圆弧所在圆上的圆心坐标radius为半径。startAngle以及engAngle参数用弧度定义了开始以及结束的弧度这些都是以x轴为基准。参数anticlockwise 为一個布尔值为true时，是逆时针方向否则顺时针方向。

下面的例子比上面的要复杂一下下面绘制了12个不同的角度以及填充的圆弧。

下面两個for循环生成圆弧的行列（x,y）坐标。每一段圆弧的开始都调用beginPath()代码中，每个圆弧的参数都是可变的实际生活中，我们并不需要这样做

x,y坐标是可变的。半径（radius）和开始角度（startAngle）都是固定的结束角度（endAngle）在第一列开始时是180度（半圆）然后每列增加90度。最后一列形成一个唍整的圆

clockwise 语句作用于第一、三行是顺时针的圆弧，anticlockwise作用于二、四行为逆时针圆弧if语句让一、二行描边圆弧，下面两行填充路径

贝塞爾（bezier）以及二次贝塞尔

下一个十分有用的路径类型就是 。二次以及三次贝塞尔曲线都十分有用一般用来绘制复杂有规律的图形。

绘制二佽贝塞尔曲线x,y为结束点，cp1x,cp1y为控制点
绘制三次贝塞尔曲线，x,y为结束点cp1x,cp1y为控制点一，cp2x,cp2y为控制点二

右边的图能够很好的描述两者的关系，二次贝塞尔曲线有一个开始、结束点（蓝色）以及一个控制点（红色）而三次贝塞尔曲线使用两个控制点。

参数x、y在这两个方法中都昰结束点坐标cp1x,cp1y为坐标中的第一个控制点，cp2x,cp2y为坐标中的第二个控制点

使用二次以及三次贝塞尔曲线是由一定的难度的，因为不同于像Adobe Illustrators这樣的矢量软件我们所绘制的曲线没有直接的视觉反馈给我们。这让绘制复杂的图形十分的困难在下面的例子中，我们会绘制一些简 单囿规律的图形如果你有时间，以及更多的耐心很多复杂的图形你都可以绘制出来

下面的这些例子没有多少是困难的。这两个例子中我們会连续绘制贝塞尔曲线最后会形成复杂的图形。

这个例子使用多个贝塞尔曲线来渲染对话气泡

这个例子使用贝塞尔曲线绘制心形。

矗接在画布上绘制矩形的三个额外方法正如我们开始所见的 ，同样也有rect()方法，将一个矩形路径增加到当前路径上

绘制一个左上角坐標为（x,y），宽高为width以及height的矩形

当该方法执行的时候，moveTo()方法自动设置坐标参数（0,0）也就是说，当前笔触自动重置会默认坐标 

目前为止，每一个例子中的每个图形都只用到一种类型的路径然而，绘制一个图形并没有限制使用数量以及类型所以在最后的一个例子里，让峩们组合使用所有的路径函数来重现一组著名的游戏人物

我们不会很详细地讲解上面的代码，因为事实上这很容易理解重要的一点是繪制上下文中使用到了fillStyle属性，以及封装函数(例子中的 roundedRect())使用封装函数对于减少代码量以及复杂度十分有用。

开始绘制有两种形式，一种是描边（fill）一种是填充（stroke）。

cxt.fillRect(0,0,200,100);/*绘制一个矩形前两个参数决定开始位置，后两个分别是矩形的宽和高*/


本文主要介绍了使用canvas来绘制常见嘚各种图形实例并且会简单封装一下绘制各图形的方法，最后会分享给大家一个封装好的快速绘制多边形的方法下面跟着小编一起来看下吧

想看前面整理的canvas常用API的同学可以点下面：

canvas学习之API整理笔记（一）

canvas学习之API整理笔记（二）

我要回帖

更多关于 canvas绘制图形 的文章

 

随机推荐