怎么使用HTML5的Canvas繪制曲線

今天小編給大家分享一下怎么使用HTML5的Canvas繪制曲線的相關(guān)知識點，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

Canvas2D自帶的曲線方法

其實很多繪圖工具中的簡單曲線繪制都是使用貝茲曲線的，如果你用過windows自帶繪圖工具中的曲線就一定不陌生?？梢韵韧铣鲆粭l直線，然后點擊某個位置讓直線扭曲。一開始的拖動動作就是決定曲線的兩個頂點，點擊動作就是添加中間點。在windows自帶的繪圖工具使用的是三次貝茲曲線，你可以添加兩個中間點。貝茲曲線和一般的多項式插值不同，它的中間點只是作為控制點用的，并不是曲線必須經(jīng)過的頂點。而且它還可以做出閉曲線。Canvas2D中有提供兩個繪制曲線的方法

　　　　quadraticCurveTo：二次貝茲曲線

　　　　bezierCurveTo：三次貝茲曲線

　　線條是從當(dāng)前所在位置開始畫的，可以用moveTo方法來指定當(dāng)前位置。有了曲線的開始位置后，還需要中間點和結(jié)束位置。把這些位置坐標(biāo)傳給繪制函數(shù)即可。比如二次貝茲曲線需要一個中間點和一個結(jié)束位置，所以要傳兩個坐標(biāo)給quadraticCurveTo函數(shù)。坐標(biāo)是由x和y組成的，也就是說這個函數(shù)有4個參數(shù)。bezierCurveTo也是一樣的，只是它有兩個中間點而已。下面咱就來用用看

CSS Code復(fù)制內(nèi)容到剪貼板

<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字形的軌跡給定四個點，畫出了普通的直線和貝茲曲線。這只是普通的曲線而已，貝茲曲線的厲害之處是它可以畫出閉曲線，比如這樣一段代碼

CSS Code復(fù)制內(nèi)容到剪貼板

g.beginPath();   

g.strokeStyle="#00F";   

g.moveTo(100,0);   

g.bezierCurveTo(-100,200, 300,200, 100,0);   

g.stroke();  

把三次貝茲曲線的開始位置和結(jié)束位置設(shè)置到同一點上就可以畫出閉曲線。因為貝茲曲線的插值方向不是按照坐標(biāo)軸走的，所以可以繪制出閉曲線。如果想讓多項式插值繪制出閉曲線我們就得轉(zhuǎn)換參數(shù)，使用極坐標(biāo)系來完成。

以上就是“怎么使用HTML5的Canvas繪制曲線”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。