初學canvas

1.Canvas 元素用於在網頁上繪製圖形。

2.創建Canvas元素

<canvas id="myCanvas" width="200" height="100"></canvas>

3.操作Canvas元素對象

3.1獲取Canvas元素及創建Context對象

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d"); //getContext() 方法返回一個用於在畫布上繪圖的環境。

 

用jQuery獲取：var c=$("#myCanvas");/var c=$("#myCanvas").val;/var c=$("#myCanvas").html;調用getContext方法時報錯,原因jQuery()返回的是jQuery對象，而jQuery對象是沒有getContext方法的，需要把jQuery對象轉換成DOM對象。

3.2操作Canvas對象

1.繪製矩形

ctx.fillStyle("#ff0000");//填充紅色，在fillRect方法前生效
ctx.fillRect(20,20,150,100);//繪製矩形，參數分別對應x,y,width,height

 

fillStyle可選值：顏色（默認黑色），gradient(漸變對象)，pattern對象。

（1）gradient

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

var grd=ctx.createLinearGradient(0,0,170,0);//定義從黑到白的漸變（左->右），參數對應（漸變開始點的x座標，漸變開始點的y座標，漸變結束點的x座標，漸變結束點的y座標）
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");

ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);

 

2.繪製直線

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.moveTo(0,0);//直線起點座標，參數對應(x,y)
ctx.lineTo(200,150);//直線終點座標，參數對應(x,y)，可以設置多個lineTo來繪製折線
ctx.stroke();//執行繪製

 

3.繪製圓形

ctx.fillStyle = "#ff0000";
ctx.beginPath();//開始繪製
ctx.arc(100, 100, 50, 0, Math.PI * 2, true);//創建弧線/曲線，參數對應，（圓形x位置，圓心y位置，起始角，結束角，是否順時針（false=順時針，true=逆時針））
ctx.closePath();//結束繪製，此時完成一個閉合圖形的繪製
//ctx.fill();//開始繪製圖形
//ctx.stroke();//開始繪製線條

4.二次貝賽爾曲線

 ctx.lineWidth = 6;
 ctx.strokeStyle = "#ff0000";
 ctx.beginPath();
 ctx.moveTo(0, 200);
 ctx.quadraticCurveTo(75, 50, 300, 200);//參數對應（控制點x值，控制點y值，結束點x值，結束點y值）
 ctx.stroke();

5.三次貝賽爾曲線

 ctx.lineWidth = 6;
 ctx.strokeStyle = "#ff0000";
 ctx.beginPath();
 ctx.moveTo(0, 200);
 ctx.bezierCurveTo(205,56,239,439,429,236);//在二次貝塞爾曲線的基礎上增加一個控制點，參數對應(控制點1x，控制點1y，控制點2x,控制點2y，結束點x,結束點y)
 ctx.stroke();

6.保存和恢復canvas

save方法用於臨時保存畫布座標系統的狀態

restore方法可以用來恢復save之後設置的狀態,

 

4.與SVG比較

（截圖來源360百科）