濮阳杆衣贸易有限公司

主頁(yè) > 知識(shí)庫(kù) > 使用HTML5的Canvas繪制曲線的簡(jiǎn)單方法

使用HTML5的Canvas繪制曲線的簡(jiǎn)單方法

熱門標(biāo)簽:申請(qǐng)400電話流程簡(jiǎn)介 呼和浩特外呼電銷系統(tǒng)排名 阜陽(yáng)企業(yè)外呼系統(tǒng) pageadm實(shí)現(xiàn)地圖標(biāo)注 南通數(shù)據(jù)外呼系統(tǒng)推廣 外呼系統(tǒng)電話怎么投訴 外呼線穩(wěn)定線路 邢臺(tái)縣地圖標(biāo)注app 地圖標(biāo)注位置能賺錢嗎

Canvas2D自帶的曲線方法
  最近在研究3D柔體的計(jì)算,所以在狂補(bǔ)一些知識(shí)。經(jīng)常會(huì)涉及到一些數(shù)值分析方面的東西,主要是曲線的各種插值算法。突然想起了Canvas2D本身也是可以繪制曲線的,使用的是二次和三次的貝茲曲線。其實(shí)我也一直沒用它的過這個(gè)方法,現(xiàn)在就來試試吧~
  這篇只是說說簡(jiǎn)單的曲線繪制,咱就不說一大堆復(fù)雜的原理了。況且貝茲曲線這東西的原理本身很簡(jiǎn)單,看看維基百科就能明白。其實(shí)很多繪圖工具中的簡(jiǎn)單曲線繪制都是使用貝茲曲線的,如果你用過windows自帶繪圖工具中的曲線就一定不陌生??梢韵韧铣鲆粭l直線,然后點(diǎn)擊某個(gè)位置讓直線扭曲。一開始的拖動(dòng)動(dòng)作就是決定曲線的兩個(gè)頂點(diǎn),點(diǎn)擊動(dòng)作就是添加中間點(diǎn)。在windows自帶的繪圖工具使用的是三次貝茲曲線,你可以添加兩個(gè)中間點(diǎn)。貝茲曲線和一般的多項(xiàng)式插值不同,它的中間點(diǎn)只是作為控制點(diǎn)用的,并不是曲線必須經(jīng)過的頂點(diǎn)。而且它還可以做出閉曲線。Canvas2D中有提供兩個(gè)繪制曲線的方法
    quadraticCurveTo:二次貝茲曲線
    bezierCurveTo:三次貝茲曲線
  線條是從當(dāng)前所在位置開始畫的,可以用moveTo方法來指定當(dāng)前位置。有了曲線的開始位置后,還需要中間點(diǎn)和結(jié)束位置。把這些位置坐標(biāo)傳給繪制函數(shù)即可。比如二次貝茲曲線需要一個(gè)中間點(diǎn)和一個(gè)結(jié)束位置,所以要傳兩個(gè)坐標(biāo)給quadraticCurveTo函數(shù)。坐標(biāo)是由x和y組成的,也就是說這個(gè)函數(shù)有4個(gè)參數(shù)。bezierCurveTo也是一樣的,只是它有兩個(gè)中間點(diǎn)而已。下面咱就來用用看

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <canvas id="canvas" width="200" height="200"></canvas>   
  2. <script>   
  3. var g=canvas.getContext("2d");   
  4. //普通的直線   
  5. g.beginPath();   
  6. g.strokeStyle="#CCC";   
  7. g.moveTo(0,0);   
  8. g.lineTo(200,0);   
  9. g.lineTo(0,200);   
  10. g.lineTo(200,200);   
  11. g.stroke();   
  12. //貝茲曲線   
  13. g.beginPath();   
  14. g.strokeStyle="#F00";   
  15. g.moveTo(0,0);   
  16. g.bezierCurveTo(200,0, 0,200, 200,200);   
  17. g.stroke();   
  18. </script>  


這個(gè)按照Z(yǔ)字形的軌跡給定四個(gè)點(diǎn),畫出了普通的直線和貝茲曲線。這只是普通的曲線而已,貝茲曲線的厲害之處是它可以畫出閉曲線,比如這樣一段代碼

CSS Code復(fù)制內(nèi)容到剪貼板
  1. g.beginPath();   
  2. g.strokeStyle="#00F";   
  3. g.moveTo(100,0);   
  4. g.bezierCurveTo(-100,200, 300,200, 100,0);   
  5. g.stroke();  

把三次貝茲曲線的開始位置和結(jié)束位置設(shè)置到同一點(diǎn)上就可以畫出閉曲線。因?yàn)樨惼澢€的插值方向不是按照坐標(biāo)軸走的,所以可以繪制出閉曲線。如果想讓多項(xiàng)式插值繪制出閉曲線我們就得轉(zhuǎn)換參數(shù),使用極坐標(biāo)系來完成。
  我使用的例子都是三次貝茲曲線。其實(shí)二次的也一樣,只是少了個(gè)中間點(diǎn)就畫不出我想要的東西了。我就不再啰嗦一大堆了,這篇就這樣吧= =。。

標(biāo)簽:鶴崗 蚌埠 內(nèi)蒙古 黃山 撫順 辛集 德州 楊凌

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《使用HTML5的Canvas繪制曲線的簡(jiǎn)單方法》,本文關(guān)鍵詞  使用,HTML5,的,Canvas,繪制,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《使用HTML5的Canvas繪制曲線的簡(jiǎn)單方法》相關(guān)的同類信息!
  • 本頁(yè)收集關(guān)于使用HTML5的Canvas繪制曲線的簡(jiǎn)單方法的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章
    澜沧| 安阳市| 金门县| 宁乡县| 长葛市| 焦作市| 泗水县| 临猗县| 得荣县| 潍坊市| 偏关县| 马关县| 阿拉善右旗| 邳州市| 兴仁县| 焉耆| 江北区| 元江| 云阳县| 吉隆县| 沧源| 中超| 青龙| 华亭县| 西林县| 卓尼县| 延边| 城口县| 临桂县| 临武县| 大石桥市| 铁岭市| 锡林郭勒盟| 洮南市| 车险| 略阳县| 雅安市| 广灵县| 思南县| 定兴县| 五大连池市|