主頁(yè) > 知識(shí)庫(kù) > html5 Canvas畫(huà)圖教程(6)—canvas里畫(huà)曲線之a(chǎn)rcTo方法

html5 Canvas畫(huà)圖教程(6)—canvas里畫(huà)曲線之a(chǎn)rcTo方法

熱門(mén)標(biāo)簽:江蘇高頻外呼系統(tǒng)線路 電銷機(jī)器人視頻 洛陽(yáng)市伊川縣地圖標(biāo)注中心官網(wǎng) 搜狗星級(jí)酒店地圖標(biāo)注 平頂山電子地圖標(biāo)注怎么修改 會(huì)聲會(huì)影怎樣做地圖標(biāo)注效果 高德地圖標(biāo)注錯(cuò)誤怎么修改 地圖標(biāo)注自己去過(guò)的地方 標(biāo)準(zhǔn)智能外呼系統(tǒng)
上一篇文章講了canvas的arc方法,這一篇講和他有關(guān)的arcTo方法。
arc與arcTo,從名字都能看出來(lái)相似。arcTo也是畫(huà)曲線的方法,而且他畫(huà)出的曲線也是正圓的一段弧線。但他的參數(shù)和arc簡(jiǎn)直是不共戴天~
ctx.arcTo(x1,y1,x2,y2,radius);arcTo的參數(shù)中包括兩個(gè)點(diǎn),而且這兩個(gè)點(diǎn)中并沒(méi)有表示圓心的點(diǎn),僅僅最后的參數(shù)是圓的半徑,表示arcTo和圓有那么點(diǎn)關(guān)系。
網(wǎng)上關(guān)于arcTo的文章很少,好不容易找到一篇還是外國(guó)的;而且canvas畫(huà)圖木有直觀工具,只能靠猜,arcTo害我猜了半天。。
為了直觀的描述,我采取了一種輔助辦法:arcTo畫(huà)到哪里,我就用lineTo也畫(huà)到相應(yīng)的點(diǎn),以查看他們的關(guān)系。就是畫(huà)輔助線。

復(fù)制代碼
代碼如下:

var x0=100,
y0=400,
x1 = 500,
y1 = 400,
x2 = 450,
y2 = 450;
ctx.beginPath();
ctx.moveTo(x0,y0);
ctx.strokeStyle = "#f00";
ctx.lineWidth = 2;
ctx.arcTo(x1,y1,x2,y2,20);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = "rgba(0,0,0,0.5)";
ctx.lineWidth = 1;
ctx.moveTo(x0,y0);
ctx.lineTo(x1,y1);
ctx.fillText('x1,y1',x1+10,y1+10)
ctx.lineTo(x2,y2);
ctx.fillText('x2,y2',x2+10,y2)
ctx.stroke();

看起來(lái)代碼有點(diǎn)多,其實(shí)很簡(jiǎn)單。我用了幾個(gè)變量來(lái)保存坐標(biāo)值,其余的都是canvas的操作了。
變量說(shuō)明:x0,y0是起點(diǎn)坐標(biāo),x1,y1是第一個(gè)點(diǎn)坐標(biāo),x2,y2就是第二個(gè)點(diǎn)坐標(biāo)。其中l(wèi)ineTo畫(huà)的直線是半透明的1px黑線,arcTo畫(huà)的線條是2px的紅線。
刷新頁(yè)面,即可看到下圖。


不得不說(shuō)這條紅線很像一個(gè)鉤子。
于是arcTo的規(guī)律就找到了,他其實(shí)是通過(guò)起點(diǎn),第1點(diǎn),第2點(diǎn)的兩條直線,組成了一個(gè)夾角,而這兩條線,也是參數(shù)圓的切線。
其中圓的半徑?jīng)Q定了圓會(huì)在什么位置與線條發(fā)生切邊。就像一個(gè)球往一個(gè)死角里面滾,球越小就滾得越進(jìn)去,越靠近死角;球大則反之。
這是一個(gè)很嚴(yán)肅的學(xué)術(shù)問(wèn)題,大家可不要YY。
讓我們把球球變大吧!

復(fù)制代碼
代碼如下:

ctx.arcTo(x1,y1,x2,y2,50); //半徑改成50


如圖,你可以看到圓弧變得很大,甚至都不和直線相切了。
當(dāng)然,實(shí)際上他們還是相切的,因?yàn)榍芯€是無(wú)限延長(zhǎng)的。
我們繼續(xù)探索,把圓繼續(xù)變大,把起點(diǎn)與第1點(diǎn)的距離縮短。

復(fù)制代碼
代碼如下:

var x0=400; //起點(diǎn)x坐標(biāo)從100變400
...
ctx.arcTo(x1,y1,x2,y2,100); //圓的半徑變大到100然后你就會(huì)看到這么個(gè)奇特的圖形。

本來(lái)是個(gè)鉤子,現(xiàn)在被硬生生的掰彎了,還掰到反方向了!有點(diǎn)像酒瓶架了。
不過(guò),大家注意看,這個(gè)圓依然是和兩條線相切的!只是現(xiàn)在兩條線的長(zhǎng)度都滿足不了這個(gè)圓了!他已經(jīng)把兩條線都無(wú)線延長(zhǎng)了!
這個(gè)鉤子柄什么時(shí)候會(huì)發(fā)生反轉(zhuǎn)呢?如果你幾何學(xué)的好,你可以試著理解一下點(diǎn)與圓的切線方程。
arcTo方法中有個(gè)很重要的點(diǎn),這個(gè)重要的點(diǎn)就是代碼中的(x1,y1),只要他到圓的切點(diǎn)的距離,超過(guò)了他到起點(diǎn)(x0,y0)的距離,就會(huì)發(fā)生反轉(zhuǎn)。
從圖中我們可以看到,(x2,y2)這個(gè)點(diǎn)的坐標(biāo)可以無(wú)限變化,只要他始終是切線上的一個(gè)點(diǎn),那么在圓的半徑不變的情況下,arcTo畫(huà)出的圖形不會(huì)有任何變化。這點(diǎn)需要特別注意。
讓我用我拿不上臺(tái)面的幾何知識(shí)來(lái)驗(yàn)證下這個(gè)命題吧。為了方便計(jì)算,我先把兩條線的夾角改成90度。

復(fù)制代碼
代碼如下:

var x0=100,
y0=400,
x1 = 500,
y1 = 400,
x2 = 500,
y2 = 450;

更改后就是90度張開(kāi)了喲!我們保持球的半徑不變。刷新后:


我們把y2變大,也就是延長(zhǎng)了一條切線,把他變成550,刷新后:


 
切線是延長(zhǎng)了,但arcTo畫(huà)出的紅線沒(méi)有任何變化。

標(biāo)簽:蚌埠 常德 鄂爾多斯 廣西 阿克蘇 廣東 松原 果洛

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《html5 Canvas畫(huà)圖教程(6)—canvas里畫(huà)曲線之a(chǎn)rcTo方法》,本文關(guān)鍵詞  html5,Canvas,畫(huà)圖,教程,canvas,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《html5 Canvas畫(huà)圖教程(6)—canvas里畫(huà)曲線之a(chǎn)rcTo方法》相關(guān)的同類信息!
  • 本頁(yè)收集關(guān)于html5 Canvas畫(huà)圖教程(6)—canvas里畫(huà)曲線之a(chǎn)rcTo方法的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章