大略形状绘制《HTML5系列教程18》
Canvas在HTML5中有着非常强大的功能，它不仅可以绘制一些大略的图案，还可以进行一些大略形状绘制如：圆形、三角形、矩形、圆角矩形等二维形状，并可以根据用户的实际须要绘制自定义二维图形。而要完成这项功能，就须要用到CanvasRenderingContext2D工具供应的其余一些API。
1.圆形的绘制方法
在上篇文中我们利用了arc函数绘制圆弧，不知道大家有没有把稳到我们在指定圆弧结束角时利用了“2math.PI0.75”这样的参数，Math.PI是打算中表示数学π的意思，我们用2π乘以0.75便是绘制了四分之三个圆，这样就得到了一个圆弧。如果我们把0.75去掉，就能绘制一个圆形了，代码如图所示：
HTML5中圆形的绘制方法代码
在谷歌浏览器中显示预览效果如图所示：
HTML5中圆形的绘制方法效果预览
2.三角形的绘制方法
在上一篇文章我们也学了如何绘制一条直线，那么如果我们绘制三条直线，并设置三条直线的出发点和终点相互连接，这样我们就能得到一个三角形了，绘制三角形的代码如图所示：
HTML中三角形的绘制方法代码
在谷歌浏览器中显示预览效果如图所示：
HTML中三角形的绘制方法效果预览
3.圆角矩形的绘制方法
上面的图形我们都是用Canvas的CanvasRenderingContext2D能够直接供应的图形工具，那如果须要绘制如圆角矩形这样分外一点的图形，我们该当若何绘制呢？那么这里就须要用到其余几个API工具了，通过一些分外的处理，绘制出符合我们哀求的图形。不才面的代码中，我们利用了arcTo函数绘制圆角矩形，该函数的描述见下表：
HTML5中arcTo函数详情描述
arcTo函数为我们供应了两条切线之间圆弧的绘制方法，圆角矩形是由四个这样的圆弧和四条直线组成的，以是只要我们能精确掌握圆弧和直线的每个点，就能准确绘制出一个圆角矩形。绘制圆角矩形的代码如图所示：
在HTML5中圆角矩形的绘制方法代码
在谷歌浏览器中显示预览效果如图所示：
在HTML5中圆角矩形的绘制方法效果预览
4.大略的自定义图形绘制“微笑容色绘制”
虽然Canvas供应了很多基本图形的绘制，但在实际运用中，常常会须要绘制一些繁芜的图形，而Canvas却并没有供应绘制这些图案的API，以是这时候就须要利用多种绘图方法来绘制这些图形。以下是作为示例所绘制的一个大略的自定义图形“微笑容色”
在HTML中微笑容色绘制方法代码
在谷歌浏览器中显示预览效果如图所示：
在HTML中微笑容色绘制方法效果预览
日常生活中可以见到很多不规则的图形，你可以想到些什么图形呢？大家可以考试测验一下利用已经学了的知识把自己想到的一些大略形状绘制出来。祝大家：身体康健、生活愉快！
