Canvas繪圖
1、概念
canvas一般就是用來繪制圖像的
2、基本知識
上下文對象
var canvas = doucment.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "color";// 填充樣式
ctx.strokeStyle = "color";//邊框樣式
ctx.fill();//填充區域
ctx.stroke();//繪制邊框
附：顏色值：
#fff
#642
rgb(255, 128, 0)
rgba(100, 100, 100, 0.8)
hsl(20, 62%, 28%)
hsla(40, 82%, 33%, 0.6)
red
3、繪制矩形
上下文對象
//1、設置填充樣式或者邊框樣式(ctx.fillStyle = "color";或者ctx.strokeStyle = "color";)
//2、繪制矩形區域(如果采用fillRect或者strokeRect繪制矩形，可以省略第3步);
//3、填充或者加上邊框(ctx.fill();或者ctx.stroke();)
4、清除矩形區域
作用：就像剛交完工的房子，有很多垃圾，你需要清理，清理除一塊區域，以後將作為你的臥室。
ctx.clearRect(x,y,w,h);
5、圓弧
//1、設置填充樣式或者邊框樣式(ctx.fillStyle = "color";或者ctx.strokeStyle = "color";)
//2、繪制原型區域
ctx.arc(x,y,r,startAngle,endAngle,boolean);
r代表半徑，startAngle,endAngle分別代表開始角度和結束角度，最後一個參數表示true(逆時針),false(順時針)
//3、填充或者加上邊框(ctx.fill();或者ctx.stroke();)
註：1、在繪制圓弧的時候，必須使用ctx.beginPath()開始和ctx.closePath()結束，當然，前提條件時你要畫規則的圖形
2、這裏的開始角度和結束角度不是deg，而是Math.PI*(相應的值)。
6、路徑
ctx.beginPath()與ctx.closePath()
註：如果不加的話，就會出現“靈異事件”（它將你的上一個結束點作為接下來的開始點）；變得不是你想要的圖形。
7、繪制線段
ctx.moveTo(x,y);-----這裏必須以moveTo開頭，其實是將你的原點移動了位置
ctx.lineTo(x,y);---繪制接下來的點。
註：一般情況下、只需要一個moveTo即可。
註：線條屬性lineCap： context.lineCap = ‘butt‘; context.lineCap = ‘round‘;context.lineCap = ‘square‘
註：線條屬性lineJoin： context.lineJoin = ‘miter‘; context.lineJoin = ‘bevel‘;context.lineJoin = ‘round‘;
公式：cxt.lineTo(Math.cos((18 + i * 72 ) / 180 * Math.PI) * R + x, -Math.sin((18 + i * 72 ) / 180 * Math.PI) * R + y);
cxt.lineTo(Math.cos((54 + i * 72 ) / 180 * Math.PI) * r + x, -Math.sin((54 + i * 72 ) / 180 * Math.PI) * r + y);
8、繪制貝塞爾曲線
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
繪制二次樣條曲線 context.quadraticCurveTo(qcpx,qcpy,qx,qy)
cp1x:第一個控制點x坐標 cp1y:第一個控制點y坐標 cp2x:第二個控制點x坐標 cp2y:第二個控制點y坐標
x:終點x坐標 y:終點y坐標 qcpx:二次樣條曲線控制點x坐標 qcpy:二次樣條曲線控制點y坐標
qx:二次樣條曲線終點x坐標 qy:二次樣條曲線終點y坐標
註：context.quadraticCurveTo(qcpx,qcpy,qx,qy)還可以換成
context.bezierCurveTo(x,y,cp2x,cp2y,x,y),第一組的x和y表示的是第一條曲線的終點
9、線性漸變
var lg= context.createLinearGradient(xStart,yStart,xEnd,yEnd)
lg.addColorStop(offset,color);
eg:(lg.addColorStop(0,"red");lg.addColorStop(0.5,"green");lg.addColorStop(1,"blue"))
ctx.fillStyle = lg;
10、徑向漸變（發散）
var rg=context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)
徑向漸變（發散）顏色rg.addColorStop(offset,color)
xStart:發散開始圓心x坐標
yStart:發散開始圓心y坐標 radiusStart:發散開始圓的半徑 xEnd:發散結束圓心的x坐標 yEnd:發散結束圓心的y坐標
radiusEnd:發散結束圓的半徑 offset:設定的顏色離漸變結束點的偏移量(0~1)
color:繪制時要使用的顏色
用法同上：9、線性漸變
案例：同心圓、三角案例、扇形案例
11、圖形變形（平移、旋轉、縮放）
ctx.translate(x,y);
ctx.rotate(Math.PI*(angleValue));
ctx.scale(x,y);
註：平移2個值，縮放2個值，旋轉角度是弧度
12、transform() 方法
context.transform(a,b,c,d,e,f);
context.setTransform(1, 0, 0, 1, 100, 100);
///////////////////////////
// a c e
// b d f
// 0 0 1
//////////////////////////
// a,d 水平、垂直縮放
// b,c 水平、垂直傾斜
// c,f 水平、垂直位移
//////////////////////////
13、給圖形繪制陰影
ctx.shadowOffsetX = "5";
ctx.shadowOffsetY = "5";
ctx.shadowBlur = "5";
ctx.shadowColor = "red";
繪制需要的圖形
14、繪制文字
ctx.font="italic 30px 微軟雅黑";//順序不能改
*ctx.fillStyle = "color";或者ctx.strokeStyle = "color";
ctx.textBaseline = "";設置垂直對齊方式
ctx.textAlign = "";設置水平對齊方式
ctx.fillText("文本",x,y)（實心字）或者ctx.strokeText("文本",x,y)（字的輪廓）;
註：上面帶*的那個設置，其實設置的時字體的顏色
15、保存和恢復狀態（context）
ctx.save();//保存當前繪制的圖形，
ctx.restore();//恢復到離他最近的那個save的狀態
16、圖像組合
在繪制完成第一個圖形之後，加
context.globalCompositeOperation=type
再接著繪制第二個圖形
type：
source-over（默認值）:在原有圖形上繪制新圖形
destination-over:在原有圖形下繪制新圖形
source-in:顯示原有圖形和新圖形的交集，新圖形在上，所以顏色為新圖形的顏色
destination-in:顯示原有圖形和新圖形的交集，原有圖形在上，所以顏色為原有圖形的顏色
source-out:只顯示新圖形非交集部分
destination-out:只顯示原有圖形非交集部分,是將交集的部分轉化為透明
source-atop:顯示原有圖形和交集部分，新圖形在上，所以交集部分的顏色為新圖形的顏色
destination-atop:顯示新圖形和交集部分，新圖形在下，所以交集部分的顏色為原有圖形的顏色
lighter:原有圖形和新圖形都顯示，交集部分做顏色疊加
xor:重疊飛部分不現實
copy:只顯示新圖形
17、結合setInterval制作動畫
window.setInterval(function(){
//執行的方法體
},10)；
18、繪圖 context.drawImage
context.drawImage(image,x,y)
image:Image對象var img=new Image(); img.src="url(...)";
x:繪制圖像的x坐標 y:繪制圖像的y坐標
context.drawImage(image,x,y,w,h)
image:Image對象var img=new Image(); img.src="url(...)";
x:繪制圖像的x坐標 y:繪制圖像的y坐標 w:繪制圖像的寬度 h:繪制圖像的高度
context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh):選取圖像的一部分矩形區域進行繪制
image:Image對象var img=new Image(); img.src="url(...)";
sx：圖像上的x坐標 sy：圖像上的y坐標 sw：矩形區域的寬度 sh：矩形區域的高度
dx：畫在canvas的x坐標 dy：畫在canvas的y坐標 dw：畫出來的寬度 dh：畫出來的高度
Canvas繪圖