html5 Canvas畫(huà)圖教程(8)—canvas里畫(huà)曲線之bezierCurveTo方法

2020-03-24 17:39:59

字體：大中小

供稿：網(wǎng)友

HTML html5 Canvas畫(huà)圖教程(8)—canvas里畫(huà)曲線之bezierCurveTo方法
前面的文章我已經(jīng)講了3種在canvas中畫(huà)曲線的方法：arc,arcTo以及quadraticCurveTo.他們都有一個(gè)共同點(diǎn)，就是他們畫(huà)的曲線都只能偏向一邊，今天講的bezierCurveTo與他們最大的不同點(diǎn)就是有兩個(gè)控制點(diǎn)，即可以畫(huà)出S形的曲線了。

bezierCurveTo，也就是所謂的貝賽爾曲線了，如果你學(xué)過(guò)某些畫(huà)圖工具，就能馬上理解。
bezierCurveTo的語(yǔ)法如下：
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畫(huà)出一條曲線需要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畫(huà)圖的老問(wèn)題了，就是代碼畫(huà)圖全部靠猜，畫(huà)到哪里你要刷新下才能明了。

我還是延續(xù)前面的優(yōu)良傳統(tǒng)，畫(huà)一些輔助線來(lái)幫助大家理解：

復(fù)制代碼代碼如下:
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();
//開(kāi)始畫(huà)輔助線
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();

這里先畫(huà)了一個(gè)類似quadraticCurveTo的曲線，只偏向一邊。這條線顯得比較圓潤(rùn) ，是因?yàn)榭刂泣c(diǎn)1與2的x坐標(biāo)是相同的。
現(xiàn)在再畫(huà)一個(gè)S形的曲線，證明bezierCurveTo是與眾不同的：

復(fù)制代碼代碼如下:
var x1 = 150;
...

其實(shí)只要把控制點(diǎn)1的坐標(biāo)變一下就行了。如果控制點(diǎn)1與控制點(diǎn)2的坐標(biāo)分別處在基線的兩邊，則是畫(huà)出S形的曲線；如果都在基線的某一邊，則是類似于quadraticCurveTo的效果。
這個(gè)例子的情形比較簡(jiǎn)單，基線條（起點(diǎn)至終點(diǎn)）是豎直的，但實(shí)際應(yīng)用中大部分時(shí)候我們的基線都是斜著的，那情況就復(fù)雜多了。不過(guò)大家自己試吧

每個(gè)畫(huà)圖的方法看起來(lái)功能都比較單一，但是，強(qiáng)大的方法是各個(gè)單一的方法組合出來(lái)的。后續(xù)的文章我試著講解一些常規(guī)圖形的畫(huà)法，如圓角矩形，橢圓，他們就需要以前這些單一的方法結(jié)合起來(lái)。html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：HTML5 canvas基本繪圖之繪制曲線

下一篇：怎樣編寫(xiě)高性能HTML網(wǎng)頁(yè)