canvas繪圖通過屬於 canvas 的 JavaScript 方法完成
針對不支持html5的IE瀏覽器
<!--[if IE]> <script type="text/javascript" src="excanvas.js"></script> <![endif]-->
提示：canvas的繪圖過程（即填充與描邊）是非常消耗資源的，如果想節省系統資源提高效率，最好是繪制好所有路徑，再一次性填充或描邊圖形。
canvas 方法
| 方法 | 用途 |
|---|---|
| getContext(contextId) | 公開在 canvas 上繪圖需要的 API。惟一（當前）可用的 contextID 是 2d。 |
| height | 設置 canvas 的高度。默認值是 150 像素。 |
| width | 設置 canvas 的寬度。默認值是 300 像素。 |
| createLinearGradient(x1,y1,x2,y2) | 創建一個線性漸變。起始坐標為 x1,y1，結束坐標為 x2,y2。 |
| createRadialGradient(x1,y1,r1,x2,y2,r2) | 創建一個放射狀漸變。圓圈的起始坐標是 x1,y1，半徑為 r1。圓圈的結束坐標為 x2,y2，半徑為 r2。 |
| addColorStop(offset, color) | 向一個漸變添加一個顏色停止。顏色停止（color stop） 是漸變中顏色更改發生的位置。offset 必須介於 0 到 1 之間。 |
| fillStyle | 設置用於填充一個區域的顏色 — 例如，fillStyle='rgb(255,0,0)'. |
| strokeStyle | 設置用於繪制一根直線的顏色 — 例如，strokeStyle='rgb(255,0,0)'. |
| fillRect(x,y,w,h) | 填充一個定位於 x 和 y，寬度和高度分別為 w 和 h 的矩形。 |
| strokeRect(x,y,w,h) | 繪制一個定位於 x 和 y，寬度和高度分別為 w 和 h 的矩形的輪廓。 |
| moveTo(x,y) | 將繪圖位置移動到坐標 x,y。 |
| lineTo(x,y) | 從繪圖方法結束的最后位置到 x,y 繪制一條直線。 |
1、繪制矩形：用到fillRect
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>canvas繪制圖形</title> </head> <body> <canvas id="myCanvas" width="500" height="500"></canvas> <script type="text/javascript"> var canvas=document.getElementById("myCanvas"); //canvas 元素被設置為一個 JavaScript 變量 var myContext=canvas.getContext("2d"); //將getContext 應用到 canvas 元素 myContext.fillStyle="#ff0000"; //16進制設置填充顏色 myContext.fillRect(30,30,300,300); //定義大小 myContext.fillStyle='rgb(0,255,0)'; //rgb設置填充顏色 myContext.fillRect(60,60,300,300); myContext.fillStyle='rgba(255,0,0,0.5)'; //rgb+透明度設置填充顏色 myContext.fillRect(90,90,300,300); </script> </body> </html>
2、線性漸變，用到createLinearGradient
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>canvas繪制圖形</title> </head> <body> <canvas id="myCanvas" width="500" height="500"></canvas> <script type="text/javascript"> var myCanvas=document.getElementById("myCanvas"); var myContext=myCanvas.getContext('2d'); var myGradient=myContext.createLinearGradient(30,30,300,300); //創建一個線性漸變 myGradient.addColorStop(0,"#ff0000"); //位置0和1之間，顏色值 myGradient.addColorStop(0.5,"#00FF00"); myGradient.addColorStop(1,"#ff00ff"); myContext.fillStyle=myGradient; //用線性漸變填充 myContext.fillRect(0,0,400,400); </script> </body> </html>
3、放射性漸變，用到createRadialGradient
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>canvas繪制圖形</title> </head> <body> <canvas id="myCanvas" width="500" height="500"></canvas> <script type="text/javascript"> var myCanvas=document.getElementById('myCanvas'); var myContext=myCanvas.getContext('2d'); var myGradient=myContext.createRadialGradient(300,300,0,300,300,400); //6個參數 myGradient.addColorStop("0","#ff0000"); myGradient.addColorStop("1","#00ff00"); myContext.fillStyle=myGradient; myContext.fillRect(0,0,300,300); </script> </body> </html>
4、繪制矩形，與填充的不同，這個是描邊效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>canvas繪制圖形</title> </head> <body> <canvas id="myCanvas" width="500" height="500"></canvas> <script type="text/javascript"> var myCanvas=document.getElementById("myCanvas"); var myContext=myCanvas.getContext('2d'); myContext.strokeStyle="#ff0000"; //設置筆觸純色 myContext.strokeRect(0,0,100,100); </script> </body> </html>
(當寬度為1px時，很明顯的出現了模糊的現象，解決方法是數值都加上0.5，具體原因就自己百度下吧)
5、漸變筆觸
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>canvas繪制圖形</title> </head> <body> <canvas id="myCanvas" width="500" height="500"></canvas> <script type="text/javascript"> var myCanvas=document.getElementById("myCanvas"); var myContext=myCanvas.getContext('2d'); var myGradient=myContext.createLinearGradient(0,0,100,0); myGradient.addColorStop(0,"#ff0000"); myGradient.addColorStop(1,'#0000ff'); myContext.strokeStyle=myGradient; //設置漸變筆觸 myContext.lineWidth=5; //描邊寬度 myContext.strokeRect(0,0,100,100); </script> </body> </html>
6、繪制圓，圓周長公式=2∏r
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>canvas繪制圖形</title> </head> <body> <canvas id="myCanvas" width="500" height="500"></canvas> <script type="text/javascript"> var myCanvas=document.getElementById("myCanvas"); var myContext=myCanvas.getContext('2d'); myContext.beginPath(); //開始一個新的繪制路徑 myContext.arc(100,75,50,0,2*Math.PI); //以坐標點(100,75)為圓心，起始角為0，繪制一個半徑為50px的圓形 myContext.stroke(); //按照指定的路徑繪制弧線 </script> </body> </html>
7、繪制圓形
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>canvas繪制圖形</title> </head> <body> <canvas id="myCanvas" width="500" height="500" style="margin:100px 0 0 100px;"></canvas> <script type="text/javascript"> var myCanvas=document.getElementById("myCanvas"); var myContext=myCanvas.getContext('2d'); myContext.arc(100,100,50,0,2*Math.PI); myContext.fillStyle="#ff0000"; myContext.fill(); </script> </body> </html>
8、繪制直線
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>canvas繪制圖形</title> </head> <body style="padding:500px;"> <canvas id="myCanvas" width="500" height="500" ></canvas> <script type="text/javascript"> var myCanvas=document.getElementById("myCanvas"); var myContext=myCanvas.getContext('2d'); myContext.lineWidth=5; myContext.moveTo(0,0); //從坐標(0,0)到(200,0) myContext.lineTo(200,0); myContext.stroke(); //繪制已定義的路徑 </script> </body> </html>
9、繪制曲線
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>canvas繪制圖形</title> </head> <body style="padding:500px;"> <canvas id="myCanvas" width="500" height="500" ></canvas> <script type="text/javascript"> var myCanvas=document.getElementById("myCanvas"); var myContext=myCanvas.getContext('2d'); myContext.moveTo(20,20); myContext.quadraticCurveTo(20,100,200,20); myContext.stroke(); </script> </body> </html>
相關文章：