本线条的绘制《HTML5系列教程17》

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中绘制圆弧的代码

这些便是几种基本线条的绘制方法了，还是很有意思的，大家在练习的时候可以试着绘制一些形状，试不出来也没关系，下一篇中我们将会介绍一些简单的形状的绘制方法。谢谢大家的观看。祝大家：身体健康、生活愉快。

言

在之前的一篇文章《用HTML5的canvas来画一个梦幻星空，来学习一下吧》中，我们使用HTML5的canvas画出了一个梦幻星空的效果。今天这篇文章我们继续使用canvas来画出几个简单的小球运动效果，一起来看看吧。

本文源码已经开源到Github上，感兴趣的可以自取，Github地址如下。

https://github.com/zhouxiongking/article-pages/tree/master/articles/movaByCanvas

HTML5

小球直线运动

首先我们来看看小球直线运动的效果图，如下所示。

运动效果图

然后我们来分析下，这个效果是如何实现的。

1. 首先设置画布宽高等信息，然后利用canvas画出一个小球，设定初始状态，包括颜色，半径，初始位置等信息。

2. 设定一个定时器，每次动态更新小球的位置，由于定时器时间比较短，肉眼观察下，相当于小球运动的效果。

通过上述的分析，我们得出以下的代码。

对于canvas页面的HTML代码永远都只包含一个元素。

HTML代码

接下来是主要的Javascript代码，首先是画布，小球初始信息的设置，并设置定时器函数。

小球初始信息

然后是执行的定时器函数，动态更新小球的位置，当小球运动出画布范围后，重新从起点位置开始运动。

定时器函数

就这两段代码，就可以实现出以上的小球匀速直线运动的效果。

小球圆周运动

首先，我们来看看小球匀速圆周运动的效果图，如下所示。

运动效果图

接下来我们同样来分析下这个效果是如何实现的。

1. 首先画出两个小圆，一个是蓝色，一个是红色，设定初始信息和上述例子一样。

2. 设定定时器，每次清除画布后，重新渲染，并且更新小蓝球的位置，由于是圆周运动，并不会出现上述例子中移出画布的情况。

通过上面的描述，我们得出以下代码，HTML代码一样，这里不再给出。

首先是原始小蓝球的绘制，并设置定时器。

小蓝球的绘制

然后是小红球的绘制。

小红球的绘制

最后是定时器函数的实现，在该函数中会让小蓝球旋转一定的角度。

定时器函数

至此，小球的匀速圆周运动效果代码就完全实现了。

总结

今天这篇文章主要是利用HTML5的canvas实现了一些简单的小球运动效果，你学会了吗？