Canvas
{
id: canvas;
width: 100; height: 100 //畫布需要定義面積
onPaint: //繪圖方法
{
//運用JS繪圖
}
}
canvas默認是透明的，沒有背景色
Canvas畫圖是通過javascript來做的
1.畫筆
a.得到畫筆
var ctx = canvas.getContext("2d"); //目前只有2d畫筆
畫筆是唯一的，需要畫不同的顏色需要重新賦值顏色
b.移動畫筆
ctx.moveTo(x, y)；
c.開啓新路徑
ctx.beginPath()
開始一條路徑，或重置當前的路徑。
如果前面有定義路徑且沒有執行ctx.stroke()，前面的路徑不會繪製。
如果有改變strokeStyle，沒有ctx.beginPath()會導致樣式混亂。因爲canvas在第二次給路徑上色時，是把之前的所有路徑軌跡合在一起來上色的。
2.畫筆屬性設置
a.設置畫筆寬度
ctx.lineWidth=10;
b.畫筆轉折樣式
lineJoin = 'miter' //尖角default
//'bevel' 斜角
//'round' 圓角
c.lineCap = 'butt' //平default
//'round' //圓，冒出一截，線的寬度
//'square' //方，冒出一截，線的寬度
d.畫筆描邊樣式/顏色ctx.strokeStyle='rgba(255, 0, 0, 0.5)' //rgb顏色，透明度0~1
3.畫直線
ctx.moveTo(0, 0) //起點
ctx.lineTo(100, 100) //線(到終點)
ctx.stroke() //描邊，把線畫出來
a.可以連續定義多條線再描邊
b.畫筆有寬度，可能出現缺的情況
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.moveTo(200,100); //注意這裏，畫筆有個中線，有缺口
ctx.lineTo(200,200);
ctx.lineTo(100,200); //沒有提起畫筆，所以沒有缺口
ctx.lineTo(100,100);
ctx.lineWidth = 10;
ctx.strokeStyle = 'rgba(255,0,0,0.5)';
ctx.stroke();
可以用ctx.closePath(); //閉合路徑，填掉缺口，如果畫的線沒有閉合，自動補充一條直線從終點到上一個moveTo的點
c.寬度爲1像素的線
模糊不清，不像一個像素：canvas劃線是從中線向兩側延伸，劃線是佔相鄰兩個像素的一半，但計算機不允許小於1px的圖形，所以佔了兩個像素
解決：以.5來定位
ctx.moveTo(100.5,100.5);
ctx.lineTo(200.5,100.5);
注：canvas的繪圖過程（即填充與描邊）是非常消耗資源的，如果想節省系統資源提高效率，最好是繪製好所有路徑，再一次性填充或描邊圖形
4.繪圖的兩種方式
a.描邊：
ctx.stroke()
1)描邊樣式/顏色
ctx.strokeStyle='rgba(255, 0, 0, 0.5)' //rgb顏色，透明度0~1
b.填充：
ctx.fill()
1)填充顏色/樣式
ctx.fillStyle='顏色' //默認的填充樣式是不透明的黑色
2)未閉合的路徑的填充
Canvas會從你當前路徑的終點直接連接到起點，然後填充。
3)填充漸變顏色，漸變顏色分爲兩種：線性漸變和徑向漸變
1>線性漸變
var linear = ctx.createLinearGradient(x1,x2,x3,x4); //起點和終點,定義漸變線
linear.addColorStop(0, '#fff'); //給漸變線添加顏色
linear.addColorStop(0.5, '#f0f'); //addColorStop(0-1<可以是兩位小數表示百分比>)
linear.addColorStop(1, '#333');
ctx.fillStyle = linear; //把漸變色賦值爲填充樣式
ctx.fillRect(100,100,100,100);
ctx.stroke(); //fillRect與strokeRect畫出的都是獨立路徑，不會把剛畫出的矩形描邊
2>徑向漸變(圓形漸變)
createRadialGradient(x1,y1,r1,x2,y2,r2) //起點終點都是圓//起點圓可以看成比較大的原點
var radial = ctx.createRadialGradient(55,55,10,55,55,55); //重合的圓心座標
radial.addColorStop(0,'#fff');
radial.addColorStop(0.5,'#ff0');
radial.addColorStop(0.9,'#555');
radial.addColorStop(1,'#f00');
漸變可以賦值給fillStyle和strokeStyle。
注：如果大圓不包含小圓，效果會有問題。
5.矩形
填充矩形：
ctx.fillRect(x,y,width,height); //x,y指左上角的點
描邊矩形：
ctx.strokeRect(x,y,width,height)
類似的：
fillText, strokeText
定義矩形路徑，在填充：
ctx.rect(300,100,50,40);
ctx.stroke()
ctx.fill();
6.畫曲線
有4個函數：arc, arcTo, quadratcCurveTo, bezierCurveTo
a.arc(正圓)：context.arc(x, y, radius, startAngle, endAngle, anticlockwise) //是否逆時針
ctx.arc(100, 100, 50, 0, Math.PI*2);
ctx.fill(); //填充
ctx.stroke(); //描邊
注：arc的0度就是數學上常用的0度，但是角度默認是順時針張開的，與數學模型相反（跟座標有關，因爲canvas座標也與數學座標相反）
b.arcTo(正圓弧)
ctx.moveTo(x0, y0)
ctx.arcTo(x1,y1,x2,y2,radius) //點1，點2，圓弧半徑
ctx.strock();
(x0, y0)、(x1, y1)與(x2, y2)組成夾角，半徑爲radius的圓與該夾角相切，得到一個圓弧，(x0,y0)與第一條線的切點得到一條線段。
c.quadraticCurveTo(二次弧線)
ctx.moveTo(x0, y0); //起點
ctx.quadraticCurveTo(x1,y1,x,y); //(x1,y1)-控制點；(x,y)-終點
控制點：控制弧線弧度方向。
d.bezierCurveTo(貝賽爾曲線/貝茲曲線/貝濟埃曲線-應用於二維圖形應用程序的數學曲線)
ctx.moveTo(x0,y0) //起點
ctx.bezierCurveTo(x1,y1,x2,y2,x,y); //（x1,y1）即控制點1的座標，（x2,y2）是控制點2的座標，(x,y)是他的終點座標。弧線爲起點到終點，中間弧線偏向控制點。