本線條的繪制《HTML5系列教程17》

HTML5中基本線條的繪制

在Canvas畫布中我們可以使用JavaScript這支畫筆繪制各種圖形，它的功能之所以這么強(qiáng)大，是因?yàn)镃anvas的CanvasRenderingContext2D對(duì)象為我們提供了豐富多彩的API工具，包括我們本次要了解的直線、二次曲線、貝賽爾曲線和圓弧曲線，下表中列出的這些API就是我們本次基本線條的繪制要用到的幾種API。

HTML5中基本線條的繪制要用到的幾種API

1.繪制直線

我們?cè)趯W(xué)生時(shí)代的幾何課上就已經(jīng)學(xué)過(guò)了“兩點(diǎn)一線”，那么Canvas在繪制直線的時(shí)候也需要一個(gè)起點(diǎn)和一個(gè)終點(diǎn)，繪制直線的代碼如下圖所示：

在HTML5中繪制直線代碼

在谷歌瀏覽器中的預(yù)覽效果如下圖所示：

在HTML5中繪制直線預(yù)覽效果

2.繪制二次曲線

二次曲線（quadratic curve）也稱圓錐曲線或圓錐截線，是直圓錐面的兩腔被一個(gè)面所截而得的曲線。二次曲線由一個(gè)起點(diǎn)、一個(gè)終點(diǎn)和一個(gè)控制點(diǎn)決定，當(dāng)控制點(diǎn)經(jīng)過(guò)圓錐頂點(diǎn)時(shí)，曲線變成一個(gè)點(diǎn)、直線或相交線，當(dāng)控制點(diǎn)不經(jīng)過(guò)圓錐頂點(diǎn)時(shí)，曲線可能是圓、橢圓、雙曲線和拋物線。使用Canvas的quadraticCurveTo函數(shù)繪制二次曲線的代碼如下圖所示：

在HTML5中繪制二次曲線的代碼

在谷歌瀏覽器中的預(yù)覽效果如下圖所示：

在HTML5中繪制二次曲線的代碼

3.繪制貝塞爾曲線

貝塞爾曲線是電腦圖形中非常重要的參數(shù)曲線，廣泛應(yīng)用于計(jì)算機(jī)圖形中為平鋪曲線建立模型。貝塞爾曲線的每一個(gè)頂點(diǎn)都有兩個(gè)控制點(diǎn)，用于控制在該點(diǎn)兩側(cè)的曲線的弧度。它有一個(gè)起點(diǎn)、一個(gè)終點(diǎn)、兩個(gè)控制點(diǎn)，共四個(gè)點(diǎn)決定一條曲線。使用Canvas的bezierCurveTo函數(shù)可以非常方便地繪制曲線，繪制貝塞爾曲線的代碼如下圖所示：

在HTML5中繪制貝塞爾曲線代碼示例

在谷歌瀏覽器中的預(yù)覽效果如下圖所示：

在HTML5中繪制貝塞爾曲線預(yù)覽圖

4.繪制圓弧

使用Canvas的arc方法繪制圓弧的代碼如下圖所示：

在HTML5中繪制圓弧的代碼

在谷歌瀏覽器中的預(yù)覽效果如下圖所示：

在HTML5中繪制圓弧的代碼

這些便是幾種基本線條的繪制方法了，還是很有意思的，大家在練習(xí)的時(shí)候可以試著繪制一些形狀，試不出來(lái)也沒(méi)關(guān)系，下一篇中我們將會(huì)介紹一些簡(jiǎn)單的形狀的繪制方法。謝謝大家的觀看。祝大家：身體健康、生活愉快。

言

在之前的一篇文章《用HTML5的canvas來(lái)畫一個(gè)夢(mèng)幻星空，來(lái)學(xué)習(xí)一下吧》中，我們使用HTML5的canvas畫出了一個(gè)夢(mèng)幻星空的效果。今天這篇文章我們繼續(xù)使用canvas來(lái)畫出幾個(gè)簡(jiǎn)單的小球運(yùn)動(dòng)效果，一起來(lái)看看吧。

本文源碼已經(jīng)開(kāi)源到Github上，感興趣的可以自取，Github地址如下。

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

HTML5

小球直線運(yùn)動(dòng)

首先我們來(lái)看看小球直線運(yùn)動(dòng)的效果圖，如下所示。

運(yùn)動(dòng)效果圖

然后我們來(lái)分析下，這個(gè)效果是如何實(shí)現(xiàn)的。

1. 首先設(shè)置畫布寬高等信息，然后利用canvas畫出一個(gè)小球，設(shè)定初始狀態(tài)，包括顏色，半徑，初始位置等信息。

2. 設(shè)定一個(gè)定時(shí)器，每次動(dòng)態(tài)更新小球的位置，由于定時(shí)器時(shí)間比較短，肉眼觀察下，相當(dāng)于小球運(yùn)動(dòng)的效果。

通過(guò)上述的分析，我們得出以下的代碼。

對(duì)于canvas頁(yè)面的HTML代碼永遠(yuǎn)都只包含一個(gè)元素。

HTML代碼

接下來(lái)是主要的Javascript代碼，首先是畫布，小球初始信息的設(shè)置，并設(shè)置定時(shí)器函數(shù)。

小球初始信息

然后是執(zhí)行的定時(shí)器函數(shù)，動(dòng)態(tài)更新小球的位置，當(dāng)小球運(yùn)動(dòng)出畫布范圍后，重新從起點(diǎn)位置開(kāi)始運(yùn)動(dòng)。

定時(shí)器函數(shù)

就這兩段代碼，就可以實(shí)現(xiàn)出以上的小球勻速直線運(yùn)動(dòng)的效果。

小球圓周運(yùn)動(dòng)

首先，我們來(lái)看看小球勻速圓周運(yùn)動(dòng)的效果圖，如下所示。

運(yùn)動(dòng)效果圖

接下來(lái)我們同樣來(lái)分析下這個(gè)效果是如何實(shí)現(xiàn)的。

1. 首先畫出兩個(gè)小圓，一個(gè)是藍(lán)色，一個(gè)是紅色，設(shè)定初始信息和上述例子一樣。

2. 設(shè)定定時(shí)器，每次清除畫布后，重新渲染，并且更新小藍(lán)球的位置，由于是圓周運(yùn)動(dòng)，并不會(huì)出現(xiàn)上述例子中移出畫布的情況。

通過(guò)上面的描述，我們得出以下代碼，HTML代碼一樣，這里不再給出。

首先是原始小藍(lán)球的繪制，并設(shè)置定時(shí)器。

小藍(lán)球的繪制

然后是小紅球的繪制。

小紅球的繪制

最后是定時(shí)器函數(shù)的實(shí)現(xiàn)，在該函數(shù)中會(huì)讓小藍(lán)球旋轉(zhuǎn)一定的角度。

定時(shí)器函數(shù)

至此，小球的勻速圓周運(yùn)動(dòng)效果代碼就完全實(shí)現(xiàn)了。

總結(jié)

今天這篇文章主要是利用HTML5的canvas實(shí)現(xiàn)了一些簡(jiǎn)單的小球運(yùn)動(dòng)效果，你學(xué)會(huì)了嗎？