使用HTML5的Canvas繪制曲線的簡單方法
我要評論Canvas2D自帶的曲線方法
最近在研究3D柔體的計算，所以在狂補一些知識。經(jīng)常會涉及到一些數(shù)值分析方面的東西，主要是曲線的各種插值算法。突然想起了Canvas2D本身也是可以繪制曲線的，使用的是二次和三次的貝茲曲線。其實我也一直沒用它的過這個方法，現(xiàn)在就來試試吧～
這篇只是說說簡單的曲線繪制，咱就不說一大堆復(fù)雜的原理了。況且貝茲曲線這東西的原理本身很簡單，看看維基百科就能明白。其實很多繪圖工具中的簡單曲線繪制都是使用貝茲曲線的，如果你用過windows自帶繪圖工具中的曲線就一定不陌生?？梢韵韧铣鲆粭l直線，然后點擊某個位置讓直線扭曲。一開始的拖動動作就是決定曲線的兩個頂點，點擊動作就是添加中間點。在windows自帶的繪圖工具使用的是三次貝茲曲線，你可以添加兩個中間點。貝茲曲線和一般的多項式插值不同，它的中間點只是作為控制點用的，并不是曲線必須經(jīng)過的頂點。而且它還可以做出閉曲線。Canvas2D中有提供兩個繪制曲線的方法
quadraticCurveTo：二次貝茲曲線
bezierCurveTo：三次貝茲曲線
線條是從當前所在位置開始畫的，可以用moveTo方法來指定當前位置。有了曲線的開始位置后，還需要中間點和結(jié)束位置。把這些位置坐標傳給繪制函數(shù)即可。比如二次貝茲曲線需要一個中間點和一個結(jié)束位置，所以要傳兩個坐標給quadraticCurveTo函數(shù)。坐標是由x和y組成的，也就是說這個函數(shù)有4個參數(shù)。bezierCurveTo也是一樣的，只是它有兩個中間點而已。下面咱就來用用看
- <canvas id="canvas" width="200" height="200"></canvas>
- <script>
- var g=canvas.getContext("2d");
- //普通的直線
- g.beginPath();
- g.strokeStyle="#CCC";
- g.moveTo(0,0);
- g.lineTo(200,0);
- g.lineTo(0,200);
- g.lineTo(200,200);
- g.stroke();
- //貝茲曲線
- g.beginPath();
- g.strokeStyle="#F00";
- g.moveTo(0,0);
- g.bezierCurveTo(200,0, 0,200, 200,200);
- g.stroke();
- </script>
這個按照Z字形的軌跡給定四個點，畫出了普通的直線和貝茲曲線。這只是普通的曲線而已，貝茲曲線的厲害之處是它可以畫出閉曲線，比如這樣一段代碼
- g.beginPath();
- g.strokeStyle="#00F";
- g.moveTo(100,0);
- g.bezierCurveTo(-100,200, 300,200, 100,0);
- g.stroke();
把三次貝茲曲線的開始位置和結(jié)束位置設(shè)置到同一點上就可以畫出閉曲線。因為貝茲曲線的插值方向不是按照坐標軸走的，所以可以繪制出閉曲線。如果想讓多項式插值繪制出閉曲線我們就得轉(zhuǎn)換參數(shù)，使用極坐標系來完成。
我使用的例子都是三次貝茲曲線。其實二次的也一樣，只是少了個中間點就畫不出我想要的東西了。我就不再啰嗦一大堆了，這篇就這樣吧= =。。
相關(guān)文章
html5 canvas實現(xiàn)的收益率曲線進度條動畫效果源碼
這是一款基于html5 canvas實現(xiàn)的收益率曲線進度條動畫效果源碼。曲線進度條上顯示數(shù)值的節(jié)點隨著進度的推進而呈現(xiàn)出相應(yīng)的上升狀態(tài)，并實時顯示相應(yīng)的數(shù)值2017-02-23- <canvas></canvas>是HTML5中新增的標簽，用于繪制圖形，這篇文章主要為大家詳細介紹了HTML5 canvas基本繪圖之繪制曲線方法，感興趣的小伙伴們可以參考一下2016-06-27
- 這篇文章主要介紹了HTML5 Canvas中使用路徑描畫二階、三階貝塞爾曲線,本文給出實現(xiàn)代碼、效果圖例和解釋說明,需要的朋友可以參考下2015-01-01
HTML5 Canvas實現(xiàn)玫瑰曲線和心形圖案的代碼實例
這篇文章主要介紹了HTML5 Canvas實現(xiàn)玫瑰曲線和心形圖案的代碼實例,需要的朋友可以參考下2014-04-10- html5的canvas很強大利用其畫布可輕松繪制貝塞爾曲線，為大家以后使用方便，特于此分享實現(xiàn)代碼，有此需求的朋友可以參考下2013-08-14
html5 canvas繪制曲線動畫特效源碼是一款效果非常不錯的曲線動畫效果。本段代碼可以在各個網(wǎng)頁使用，有需要的朋友可以直接下載使用2017-09-15
