先說一下canvas元素比較有用的方法主要是canvas通過getContext()方法獲取的上下文對象。canvas的坐標原點(0,0)是左上角。
其次設置顏色方面，通常有四種方法：16進制顏色值、英語單詞、rgb、rgba。主要注意的是后兩者，rgb的三個參數是紅綠藍0-255的值，rgba在此基礎上添加了第四個參數透明度，范圍0-1。
1.畫線
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title></title> <script type="text/javascript"> function drawLine(id){ var canvas = document.getElementById(id); //獲取上下文對象，canvas很多常用方法都是基於這個對象實現的 var context = canvas.getContext("2d"); //目前參數只有2d context.lineWidth = 5; //線條寬度 context.moveTo(10,10); //光標移到這點 context.lineTo(10,50); //下一點坐標 context.lineTo(100,50); //下一點坐標 context.lineTo(150,150); //下一點坐標 context.stroke(); //繪制路徑 } </script> <head> <body onload="drawLine('canvas')" > <canvas id="canvas" width="200px" height="200px"></canvas> </body> </html>
2.畫矩形
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title></title> <script> //畫矩形 function drawRect(id){ var canvas = document.getElementById(id); var context = canvas.getContext('2d'); context.fillStyle = "gray"; //填充顏色 context.strokeStyle = "#f60"; //邊框顏色 context.lineWidth = 5; //邊框寬度 context.fillRect(0,0,400,300); //參數：x,y,width,height。繪制“已填色”的矩形,默認填充顏色是黑色 context.strokeRect(80,80,180,120); //參數：x,y,width,height。繪制未填色的矩形,默認填充顏色是黑色 context.strokeRect(110,110,180,120); } </script> <head> <body onload="drawRect('canvas');"> <canvas id="canvas" width="400px" height="400px" ></canvas> </body> </html>
JavaScript已經是所有瀏覽器的默認腳本語言，因此<script>標簽中無需再指定腳本類型。
3.畫圓
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title></title> <script> //畫圓形 function drawArc(id){ var canvas = document.getElementById(id); var context = canvas.getContext('2d'); context.fillStyle = "#f1f2f3"; context.fillRect(0,0,400,400); for(var i=1; i<10; i++){ context.beginPath(); //路徑開始
//arc參數：x,y,半徑,開始角度,結束角度,是否按順時針方向 i % 2 ? context.arc(200,200,10*i,0,Math.PI,true): context.arc(200,200,10*i,0,Math.PI,false); context.closePath(); //路徑關閉 context.fillStyle = "rgba(255,0,0,0.25)"; //填充顏色 context.fill(); //繪制 } } </script> <head> <body onload="drawArc('canvas');"> <canvas id="canvas" width="400px" height="400px" ></canvas> </body> </html>
4.寫字
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title></title> <script> //寫字 function drawText(id){ var canvas = document.getElementById(id); var context = canvas.getContext('2d'); context.fillStyle = "gray"; context.fillRect(0,0,800,300); context.fillStyle = '#fff'; context.strokeStyle = '#fff'; context.font = "bold 40px '微軟雅黑'"; //設置字體 //context.textBaseline = 'Top'; context.textAlign = 'start'; 文字相對於瀏覽器頂部和左側的對齊方式 context.fillText('Canvas',50,50); context.strokeText('Canvas',70,100); } </script> <head> <body onload="drawText('canvas');"> <canvas id="canvas" width="400px" height="400px" ></canvas> </body> </html>
textBaseline和textAlign特點可以查看其他資源，就不在這混亂主題了。
5.將畫保存
window.location = canvas.toDataURL('image/jpeg'); //保存圖像
可以選擇自己想要的格式。
6.填充和擦除實現動畫
模擬一個進度條動態從左向右移動，就需要每隔一段時間畫一點，使用了setInterval方法。類似思想可以使用contex.clip()方法，剪切。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title></title> <script> //動畫 var i=60; function drawAnimation(){ var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.fillStyle = "gray"; context.fillRect(0,0,10,10); context.fillRect(20,0,10,10); context.fillRect(40,0,10,10); setInterval(painting,100,context); //時間單位是毫秒 } function painting(context){ context.fillRect(i,0,10,10); context.clearRect(i-60,0,10,10); i=i+20; } </script> <head> <body onload="drawAnimation()"> <canvas id="canvas" width="400px" height="400px" ></canvas> </body> </html>
介紹一下location對象的屬性中有兩類定時器，一類是一次性如setTimeout，一類是周期性如setInterval。在除IE之外的瀏覽器中，支持在這兩個方法的第三個參數位置起添被調用函數的參數，即setInterval(func,time,param1,param2...)。而IE不支持這種做法，我就把js代碼改寫成下面形式，使IE中顯示同樣的效果。
//動畫 var i=0; function drawAnimation(){
context.fillStyle = "gray"; setInterval(painting,100); } function painting(){ var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.fillRect(i,0,10,10); i=i+20; }
7.坐標變換
- 平移 context.translate(x,y) 將默認的坐標系源點鹽x軸y軸分別移動指定單位長度
- 坐標縮放 context.scale(x,y) x,y是縮放的陪數
- 坐標旋轉 context.rotate(angle) 旋轉一定角度，angle負時逆時針旋轉
坐標變換的幾個方法可以實現更炫的動畫效果，如下圖的動態時鍾，詳細做法可見《canvas動態時鍾》http://www.cnblogs.com/feitan/p/5160165.html。