canvas提供了4個繪製曲線的方法:
arc(x,y,stratangle,endangle,true/false);//預設為false
arcto(x1,y1,x2,y2,r);
x1,y2座標一,x2,y2座標2,r是圓弧半徑
quadraticcurveto(dx,dy,x,y);
dx,dy控制點,x,y是結束點
beziercurveto(dx1,dy1,dx2,dy2,x,y);
dx1,dy1是控制點一,dx2,dy2是控制點二,x,y是結束點
id = "palette" width="300px"
height="300px">
您的瀏覽器不支援canvas標籤，請公升級瀏覽器或更換其它瀏覽器
canvas>
body>
html>
var palette = document.queryselector("#palette").getcontext("2d");
palette.arc(100,100,100,0,math.pi/2,false);
palette.fillstyle = "#229138";
palette.fill();
palette.strokestyle = "#ff0000";
palette.linewidth = 5;
palette.stroke();
script>
如果我們將arc(110,110,100,0,math.pi/2,false)中的false改為true,得到的圖形如下:
由此,我們可以得到乙個非常重要的結論:
true/false表示得不是角度旋轉的方向,角度的計算始終是順時針方向來計算的,僅僅代表的是繪製弧度的方向是順時針繪製還是逆時針繪製。
canvas中預設的0°方向是沿著x軸的正方向:
為了更好的看出效果,給canvas背景新增輔助線,每一格為50px*50px。
"palette" width="500px" height="500px">
您的瀏覽器不支援canvas標籤,請公升級或更換瀏覽器
可以看到arcto畫出的是起點到第乙個座標點,第乙個座標點到第二個座標點的兩條直線的乙個圓弧，圓弧與這條切線相切。
為了進一步確定,並研究半徑對曲線的影響,我們改變一下上面的**
注:後面的**中都使用這個格仔，**相同部分不再貼上出來。
通過觀察，感覺是以(150,200)為圓心,半徑為100畫的圓弧,而(50,250)到(50,200)即起點到紫色的點部分僅僅是直線,這個紫色的點是canvas通過計算得到的點,如果這一段無法是弧線,那麼就會直接是一段直線。
為了驗證猜想,我們再改變一下上面的**。
可以看出,(50,300)到(50,200)這段完全是直線,而儘管我們將結束點移至(300,100)的位置,但是弧線並未延長。如果補全這個圓的話,幾乎應該是下圖的藍色圓,過了(150,100)切點之後,就要向下延伸了。
因此，第二個結論，我認為是:圓弧的結束點,就是圓與第二條直線的切點。
當然，我們也可以嘗試改變半徑的大小，如我們將半徑改為200。
另外乙個需要注意的是,起點不能與第乙個點重合,否則是不能畫圖圓弧的。
圖上並未出現圓弧。
因為quadraticcurveto(dx,dy,x,y)只有乙個控制點,最多只能畫出圖示的曲線,而不能畫出s形曲線,引入beziercurveto(dx1,dy1,dx2,dy2,x,y)
一共涉及到四個點，起點：moveto(x,y);終點，還有兩個控制點。當兩個控制點在起點和終點的兩側時，會得到s曲線，而當兩個控制點在連線的一側時，會得到曲線，效果類似quadraticcurveto.當然，如果所有的點都在一條直線上，會得到一條直線，但是我想應該不會有人這麼無聊吧。
試試看兩個控制點在一側的情況
使用canvas繪製貝塞爾曲線
1 二次貝塞爾曲線 quadraticcurveto cpx,cpy,x,y cpx，cpy表示控制點的座標,x，y表示終點座標 數學公式表示如下 二次方貝茲曲線的路徑由給定點p0 p1 p2的函式b t 追蹤 例項 複製 如下 canvas直線 效果 2 三次貝塞爾曲線 beziercurveto...
canvas學習筆記 四） 繪製文字
1.filltext text,x,y maxwidth 在指定的 x,y 位置填充指定的文字，繪製的最大寬度是可選的 2.stroketext text,x,y,maxwidth 在指定的 x,y 位置繪製文字邊框，繪製的最大寬度是可選的 3.font value 文字的字型樣式 4.textal...
canvas繪製四稜錐並運動
canvas的繪製圖形 1.在html檔案中 新增canvas標籤 canvas canvas 2.獲取canvas元素 jslet canvas document.getelementbyid canvas 3.建立content物件 let context canvas.getcontext 2...