日韩天天综合网_野战两个奶头被亲到高潮_亚洲日韩欧美精品综合_av女人天堂污污污_视频一区**字幕无弹窗_国产亚洲欧美小视频_国内性爱精品在线免费视频_国产一级电影在线播放_日韩欧美内地福利_亚洲一二三不卡片区

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

編輯Tag賺U幣

推薦：html5構(gòu)建觸屏網(wǎng)站之網(wǎng)站尺寸探討
html5構(gòu)建觸屏網(wǎng)站之網(wǎng)站尺寸分為兩個(gè)部分，第一部分討論跨平臺(tái)網(wǎng)站的可行性，第二部分討論viewport是如何設(shè)置的，感興趣的朋友可以參考下

上一篇文章講了canvas的arc方法，這一篇講和他有關(guān)的arcTo方法。
arc與arcTo，從名字都能看出來(lái)相似。arcTo也是畫(huà)曲線(xiàn)的方法，而且他畫(huà)出的曲線(xiàn)也是正圓的一段弧線(xiàn)。但他的參數(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à)圖木有直觀(guān)工具，只能靠猜，arcTo害我猜了半天。。
為了直觀(guān)的描述，我采取了一種輔助辦法：arcTo畫(huà)到哪里，我就用lineTo也畫(huà)到相應(yīng)的點(diǎn)，以查看他們的關(guān)系。就是畫(huà)輔助線(xiàn)。

復(fù)制代碼 代碼如下:m.hl5o.cn

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à)的直線(xiàn)是半透明的1px黑線(xiàn)，arcTo畫(huà)的線(xiàn)條是2px的紅線(xiàn)。
刷新頁(yè)面，即可看到下圖。

canvas arcTo


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

復(fù)制代碼 代碼如下:m.hl5o.cn

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

canvas arcTo


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

復(fù)制代碼 代碼如下:m.hl5o.cn

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

canvas arcTo

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

復(fù)制代碼 代碼如下:m.hl5o.cn

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

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

canvas arcTo
我們把y2變大，也就是延長(zhǎng)了一條切線(xiàn)，把他變成550，刷新后：

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


分享：html5 canvas-1.canvas介紹(hello canvas)
大家都知道，目前并不是所有的瀏覽器中支持html5，就算是支持html5的瀏覽器，也不見(jiàn)得支持html5所有的新特性,建議大家使用firefox（開(kāi)發(fā)者的最?lèi)?ài)）或者是chrome瀏覽器，我所有的例子都是基于firefox開(kāi)發(fā)的

來(lái)源：未知//所屬分類(lèi)：HTML5教程/更新時(shí)間：2013-04-22
相關(guān)HTML5教程：