整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          基于HTML5的繪制貝塞爾曲線

          基于HTML5的繪制貝塞爾曲線

          、項目簡介

          基于HTML5的繪制貝塞爾曲線

          二、實現功能

          • 支持增加和刪除控制點

          • 支持設置貝塞爾曲線階數

          • 支持設置是否顯示切線

          • 支持設置是否循環

          • 支持設置貝塞爾曲線階數

          • 支持顯示貝塞爾曲線形成過程的切線

          • 支持循環顯示貝塞爾曲線的形成動畫

          • 支持自由移動控制點

          • 支持貝塞爾曲線顯示速率

          • 支持顯示控制點坐標

          • 支持1階到7階貝塞爾曲線,限于屏幕大小,理論上可以支持N階貝塞爾曲線

          • 支持開始貝塞爾曲線

          • 支持停止貝塞爾曲線

          • 支持增加控制點

          • 支持刪除控制點

          • 支持獲取貝塞爾曲線階數

          • 支持設置移動速率

          三、技術選型

          • html

          • css

          • js

          四、界面展示

          五、源碼地址

          回復:繪圖

          本線條的繪制《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技術的bezierCurveTo的方法實現曲線運動效果

          如下:

          實現代碼:


          主站蜘蛛池模板: 精品人妻无码一区二区三区蜜桃一| 风间由美性色一区二区三区| 国精产品一区一区三区有限公司| 无码人妻一区二区三区一| 国产精品久久久久一区二区三区| 日韩一区二区三区精品| 好爽毛片一区二区三区四| 一本一道波多野结衣AV一区| 国产一区二区高清在线播放| 亚洲av无码片区一区二区三区| 亚洲日本中文字幕一区二区三区| 中文字幕视频一区| 精品久久一区二区| 精品欧洲av无码一区二区 | 全国精品一区二区在线观看| 国产乱码精品一区二区三区四川人| 免费一区二区三区| 成人精品视频一区二区三区| 亚洲福利精品一区二区三区| 国产成人片视频一区二区| 国产精品亚洲不卡一区二区三区| 国产精品一区二区AV麻豆| 国产在线一区视频| 91精品一区国产高清在线| 日韩欧国产精品一区综合无码| 免费日本一区二区| 日韩伦理一区二区| 亲子乱AV视频一区二区| 无码人妻AV免费一区二区三区| 国产一区二区三区乱码| 91video国产一区| 国产在线一区二区杨幂| 国产美女av在线一区| 国产a∨精品一区二区三区不卡| 日韩一区精品视频一区二区| 无码一区二区波多野结衣播放搜索 | 日韩少妇无码一区二区三区| 亚洲欧洲∨国产一区二区三区| 久久久久人妻精品一区二区三区 | 老熟女五十路乱子交尾中出一区| 无码人妻一区二区三区兔费|