整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
HTML5中基本線條的繪制
在Canvas畫布中我們可以使用JavaScript這支畫筆繪制各種圖形，它的功能之所以這么強大，是因為Canvas的CanvasRenderingContext2D對象為我們提供了豐富多彩的API工具，包括我們本次要了解的直線、二次曲線、貝賽爾曲線和圓弧曲線，下表中列出的這些API就是我們本次基本線條的繪制要用到的幾種API。
HTML5中基本線條的繪制要用到的幾種API
1.繪制直線
我們在學(xué)生時代的幾何課上就已經(jīng)學(xué)過了“兩點一線”，那么Canvas在繪制直線的時候也需要一個起點和一個終點，繪制直線的代碼如下圖所示：
在HTML5中繪制直線代碼
在谷歌瀏覽器中的預(yù)覽效果如下圖所示：
在HTML5中繪制直線預(yù)覽效果
2.繪制二次曲線
二次曲線（quadratic curve）也稱圓錐曲線或圓錐截線，是直圓錐面的兩腔被一個面所截而得的曲線。二次曲線由一個起點、一個終點和一個控制點決定，當(dāng)控制點經(jīng)過圓錐頂點時，曲線變成一個點、直線或相交線，當(dāng)控制點不經(jīng)過圓錐頂點時，曲線可能是圓、橢圓、雙曲線和拋物線。使用Canvas的quadraticCurveTo函數(shù)繪制二次曲線的代碼如下圖所示：
在HTML5中繪制二次曲線的代碼
在谷歌瀏覽器中的預(yù)覽效果如下圖所示：
在HTML5中繪制二次曲線的代碼
3.繪制貝塞爾曲線
貝塞爾曲線是電腦圖形中非常重要的參數(shù)曲線，廣泛應(yīng)用于計算機圖形中為平鋪曲線建立模型。貝塞爾曲線的每一個頂點都有兩個控制點，用于控制在該點兩側(cè)的曲線的弧度。它有一個起點、一個終點、兩個控制點，共四個點決定一條曲線。使用Canvas的bezierCurveTo函數(shù)可以非常方便地繪制曲線，繪制貝塞爾曲線的代碼如下圖所示：
在HTML5中繪制貝塞爾曲線代碼示例
在谷歌瀏覽器中的預(yù)覽效果如下圖所示：
在HTML5中繪制貝塞爾曲線預(yù)覽圖
4.繪制圓弧
使用Canvas的arc方法繪制圓弧的代碼如下圖所示：
在HTML5中繪制圓弧的代碼
在谷歌瀏覽器中的預(yù)覽效果如下圖所示：
在HTML5中繪制圓弧的代碼
這些便是幾種基本線條的繪制方法了，還是很有意思的，大家在練習(xí)的時候可以試著繪制一些形狀，試不出來也沒關(guān)系，下一篇中我們將會介紹一些簡單的形狀的繪制方法。謝謝大家的觀看。祝大家：身體健康、生活愉快。
在之前的一篇文章《用HTML5的canvas來畫一個夢幻星空，來學(xué)習(xí)一下吧》中，我們使用HTML5的canvas畫出了一個夢幻星空的效果。今天這篇文章我們繼續(xù)使用canvas來畫出幾個簡單的小球運動效果，一起來看看吧。
本文源碼已經(jīng)開源到Github上，感興趣的可以自取，Github地址如下。
https://github.com/zhouxiongking/article-pages/tree/master/articles/movaByCanvas
HTML5
首先我們來看看小球直線運動的效果圖，如下所示。
運動效果圖
然后我們來分析下，這個效果是如何實現(xiàn)的。
首先設(shè)置畫布寬高等信息，然后利用canvas畫出一個小球，設(shè)定初始狀態(tài)，包括顏色，半徑，初始位置等信息。
設(shè)定一個定時器，每次動態(tài)更新小球的位置，由于定時器時間比較短，肉眼觀察下，相當(dāng)于小球運動的效果。
通過上述的分析，我們得出以下的代碼。
對于canvas頁面的HTML代碼永遠都只包含一個元素。
HTML代碼
接下來是主要的Javascript代碼，首先是畫布，小球初始信息的設(shè)置，并設(shè)置定時器函數(shù)。
小球初始信息
然后是執(zhí)行的定時器函數(shù)，動態(tài)更新小球的位置，當(dāng)小球運動出畫布范圍后，重新從起點位置開始運動。
定時器函數(shù)
就這兩段代碼，就可以實現(xiàn)出以上的小球勻速直線運動的效果。
首先，我們來看看小球勻速圓周運動的效果圖，如下所示。
運動效果圖
接下來我們同樣來分析下這個效果是如何實現(xiàn)的。
首先畫出兩個小圓，一個是藍色，一個是紅色，設(shè)定初始信息和上述例子一樣。
設(shè)定定時器，每次清除畫布后，重新渲染，并且更新小藍球的位置，由于是圓周運動，并不會出現(xiàn)上述例子中移出畫布的情況。
通過上面的描述，我們得出以下代碼，HTML代碼一樣，這里不再給出。
首先是原始小藍球的繪制，并設(shè)置定時器。
小藍球的繪制
然后是小紅球的繪制。
小紅球的繪制
最后是定時器函數(shù)的實現(xiàn)，在該函數(shù)中會讓小藍球旋轉(zhuǎn)一定的角度。
定時器函數(shù)
至此，小球的勻速圓周運動效果代碼就完全實現(xiàn)了。
今天這篇文章主要是利用HTML5的canvas實現(xiàn)了一些簡單的小球運動效果，你學(xué)會了嗎？
HTML5繪畫板
支持撤銷操作、恢復(fù)撤銷
支持清空畫板
支持本地保存、下載圖片
支持橡皮擦
支持畫直線、畫圓、畫矩形
支持前景填充
支持拖拽上傳圖片
支持鉛筆繪畫、設(shè)置畫筆粗細
支持涂鴉、更換顏色
html
css
js
回復(fù)：繪圖
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
