html5 Canvas畫圖教程(8)—canvas里畫曲線之bezierCurveTo方法_HTML5教程
推薦:在html5的Canvas上繪制橢圓的幾種方法總結(jié)HTML5中的Canvas并沒有直接提供繪制橢圓的方法,下面是對(duì)幾種繪制方法的總結(jié)。各種方法各有優(yōu)缺,視情況選用。各方法的參數(shù)相同,感興趣的朋友可以參考下
前面的文章我已經(jīng)講了3種在canvas中畫曲線的方法:arc,arcTo以及quadraticCurveTo.他們都有一個(gè)共同點(diǎn),就是他們畫的曲線都只能偏向一邊,今天講的bezierCurveTo與他們最大的不同點(diǎn)就是有兩個(gè)控制點(diǎn),即可以畫出S形的曲線了。bezierCurveTo,也就是所謂的貝賽爾曲線了,如果你學(xué)過某些畫圖工具,就能馬上理解。
bezierCurveTo的語法如下:
ctx.bezierCurveTo(x1,y1,x2,y2,x,y);他的參數(shù)我照例解釋一下,其中的(x1,y1)即控制點(diǎn)1的坐標(biāo),(x2,y2)是控制點(diǎn)2的坐標(biāo),(x,y)是他的終點(diǎn)坐標(biāo)。和quadraticCurveTo一樣,他的起點(diǎn)坐標(biāo)也是由moveTo預(yù)先設(shè)置好的。
所以,bezierCurveTo畫出一條曲線需要4個(gè)點(diǎn):起點(diǎn),終點(diǎn),控制點(diǎn)1,控制點(diǎn)2.為了后續(xù)講解,這里我假定控制點(diǎn)1對(duì)應(yīng)起點(diǎn),控制點(diǎn)2對(duì)應(yīng)終點(diǎn)
這里又要提到canvas畫圖的老問題了,就是代碼畫圖全部靠猜,畫到哪里你要刷新下才能明了。
我還是延續(xù)前面的優(yōu)良傳統(tǒng),畫一些輔助線來幫助大家理解:
復(fù)制代碼 代碼如下:m.dounai2.com
var x1=450, //控制點(diǎn)1的x坐標(biāo)
y1 = 300, //控制點(diǎn)1的y
x2 = 450, //控制點(diǎn)2的x
y2 = 500,//控制點(diǎn)2的y
x = 300, //終點(diǎn)x
y = 500;//終點(diǎn)y
ctx.moveTo(300,300);//起點(diǎn)
ctx.beginPath();
ctx.lineWidth = 5;
ctx.strokeStyle = "rgba(0,0,0,1)"
ctx.moveTo(300,300);
ctx.bezierCurveTo(x1,y1,x2,y2,x,y);
ctx.stroke();
//開始畫輔助線
ctx.beginPath();
ctx.strokeStyle = "rgba(255,0,0,0.5)";
ctx.lineWidth = 1;
// 連接起點(diǎn)和控制點(diǎn)1
ctx.moveTo(300,300);
ctx.lineTo(x1,y1);
// 連接終點(diǎn)和控制點(diǎn)2
ctx.moveTo(x2,y2);
ctx.lineTo(x,y);
// 連接起點(diǎn)與終點(diǎn)(基線)
ctx.moveTo(300,300);
ctx.lineTo(x,y);
ctx.stroke();
這里先畫了一個(gè)類似quadraticCurveTo的曲線,只偏向一邊。這條線顯得比較“圓潤(rùn)”,是因?yàn)榭刂泣c(diǎn)1與2的x坐標(biāo)是相同的。
現(xiàn)在再畫一個(gè)S形的曲線,證明bezierCurveTo是與眾不同的:
復(fù)制代碼 代碼如下:m.dounai2.com
var x1 = 150;
...
其實(shí)只要把控制點(diǎn)1的坐標(biāo)變一下就行了。如果控制點(diǎn)1與控制點(diǎn)2的坐標(biāo)分別處在基線的兩邊,則是畫出S形的曲線;如果都在基線的某一邊,則是類似于quadraticCurveTo的效果。
這個(gè)例子的情形比較簡(jiǎn)單,基線條(起點(diǎn)至終點(diǎn))是豎直的,但實(shí)際應(yīng)用中大部分時(shí)候我們的基線都是斜著的,那情況就復(fù)雜多了。不過大家自己試吧
每個(gè)畫圖的方法看起來功能都比較單一,但是,強(qiáng)大的方法是各個(gè)單一的方法組合出來的。后續(xù)的文章我試著講解一些常規(guī)圖形的畫法,如圓角矩形,橢圓,他們就需要以前這些單一的方法結(jié)合起來。
分享:幾個(gè)解決兼容IE6\7\8不支持html5標(biāo)簽的幾個(gè)方法html5大行其道的時(shí)代已經(jīng)到來,如果還在糾結(jié)于,是否應(yīng)該掌握html5和css3技術(shù)時(shí),請(qǐng)狠狠的抽自己幾個(gè)嘴巴,然后,苦學(xué)吧!下面我們來看幾個(gè)解決兼容IE6\7\8不支持html5標(biāo)簽的幾個(gè)方法
相關(guān)HTML5教程:
- 只要五步 就可以用HTML5/CSS3快速制作便簽貼特效(圖)
- 網(wǎng)易微博Web App用HTML5開發(fā)的過程介紹
- HTML5 對(duì)各個(gè)標(biāo)簽的定義與規(guī)定:body的介紹
- 關(guān)于HTML5的安全問題開發(fā)人員需要牢記的
- 關(guān)于HTML5的22個(gè)初級(jí)技巧(圖文教程)
- 開發(fā)人員所需要知道的HTML5性能分析面面觀
- HTML5 Web Database 數(shù)據(jù)庫的SQL語句的使用方法
- HTML5實(shí)踐-圖片設(shè)置成灰度圖
- HTML5安全介紹之內(nèi)容安全策略(CSP)簡(jiǎn)介
- HTML5 Web存儲(chǔ)方式的localStorage和sessionStorage進(jìn)行數(shù)據(jù)本地存儲(chǔ)案例應(yīng)用
- Bootstrap 學(xué)習(xí)分享
- input元素的url類型和email類型簡(jiǎn)介
HTML5教程Rss訂閱Div+Css教程搜索
HTML5教程推薦
- 使用html5+css3來實(shí)現(xiàn)slider切換效果告別javascript+css
- html5 跨文檔消息傳輸示例探討
- html5之Canvas路徑繪圖、坐標(biāo)變換應(yīng)用實(shí)例
- html5中地理位置定位api接口開發(fā)應(yīng)用小結(jié)
- html5指南-2.如何操作document metadata
- html5 canvas-2.用canvas制作一個(gè)猜字母的小游戲
- Html5游戲開發(fā)之乒乓Ping Pong游戲示例(三)
- 利用html5 canvas破解簡(jiǎn)單驗(yàn)證碼及getImageData接口應(yīng)用
- html5 application cache遇到的嚴(yán)重問題
- HTML4和HTML5之間除了相似以外的10個(gè)主要不同
- 相關(guān)鏈接:
復(fù)制本頁鏈接| 搜索html5 Canvas畫圖教程(8)—canvas里畫曲線之bezierCurveTo方法
- 教程說明:
HTML5教程-html5 Canvas畫圖教程(8)—canvas里畫曲線之bezierCurveTo方法。