HTML5中基本线条的绘制
在Canvas画布中我们可以利用JavaScript这支画笔绘制各种图形，它的功能之以是这么强大，是由于Canvas的CanvasRenderingContext2D工具为我们供应了丰富多彩的API工具，包括我们本次要理解的直线、二次曲线、贝赛尔曲线和圆弧曲线，下表中列出的这些API便是我们本次基本线条的绘制要用到的几种API。
HTML5中基本线条的绘制要用到的几种API
1.绘制直线
我们在学生时期的几何课上就已经学过了“两点一线”，那么Canvas在绘制直线的时候也须要一个出发点和一个终点，绘制直线的代码如下图所示：
在HTML5中绘制直线代码
在谷歌浏览器中的预览效果如下图所示：
在HTML5中绘制直线预览效果
2.绘制二次曲线
二次曲线（quadratic curve）也称圆锥曲线或圆锥截线，是直圆锥面的两腔被一个面所截而得的曲线。二次曲线由一个出发点、一个终点和一个掌握点决定，当掌握点经由圆锥顶点时，曲线变成一个点、直线或相交线，当掌握点不经由圆锥顶点时，曲线可能是圆、椭圆、双曲线和抛物线。利用Canvas的quadraticCurveTo函数绘制二次曲线的代码如下图所示：
在HTML5中绘制二次曲线的代码
在谷歌浏览器中的预览效果如下图所示：
在HTML5中绘制二次曲线的代码
3.绘制贝塞尔曲线
贝塞尔曲线是电脑图形中非常主要的参数曲线，广泛运用于打算机图形中为平铺曲线建立模型。贝塞尔曲线的每一个顶点都有两个掌握点，用于掌握在该点两侧的曲线的弧度。它有一个出发点、一个终点、两个掌握点，共四个点决定一条曲线。利用Canvas的bezierCurveTo函数可以非常方便地绘制曲线，绘制贝塞尔曲线的代码如下图所示：
在HTML5中绘制贝塞尔曲线代码示例
在谷歌浏览器中的预览效果如下图所示：
在HTML5中绘制贝塞尔曲线预览图
4.绘制圆弧
利用Canvas的arc方法绘制圆弧的代码如下图所示：
在HTML5中绘制圆弧的代码
在谷歌浏览器中的预览效果如下图所示：
在HTML5中绘制圆弧的代码
这些便是几种基本线条的绘制方法了，还是很故意思的，大家在练习的时候可以试着绘制一些形状，试不出来也没紧要，下一篇中我们将会先容一些大略的形状的绘制方法。感激大家的不雅观看。祝大家：身体康健、生活愉快。
