整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
基于HTML5的繪制貝塞爾曲線
支持增加和刪除控制點
支持設置貝塞爾曲線階數
支持設置是否顯示切線
支持設置是否循環
支持設置貝塞爾曲線階數
支持顯示貝塞爾曲線形成過程的切線
支持循環顯示貝塞爾曲線的形成動畫
支持自由移動控制點
支持貝塞爾曲線顯示速率
支持顯示控制點坐標
支持1階到7階貝塞爾曲線，限于屏幕大小，理論上可以支持N階貝塞爾曲線
支持開始貝塞爾曲線
支持停止貝塞爾曲線
支持增加控制點
支持刪除控制點
支持獲取貝塞爾曲線階數
支持設置移動速率
html
css
js
回復：繪圖
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技術的bezierCurveTo的方法實現曲線運動效果
如下：
實現代碼：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
