HTML5的canvas（畫布）元素使用JavaScript在網頁上繪制圖像。下面以一個簡單例子及其效果圖（圖1）開始：
<!DOCTYPE HTML> <html><head><style type="text/css"> canvas{border:dashed 2px #CCC}</style><script type="text/javascript">/* canvas元素本身沒有繪圖能力。所有繪制工作必須在JavaScript中完成 */function drawRect(){var c=document.getElementById("myCanvas");/* 創建context對象（內建的HTML5對象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法） */var cxt=c.getContext("2d");/* 繪制一個黃色的實心矩形，并指定了位置和尺寸 */cxt.fillStyle="yellow";cxt.fillRect(40,40,220,120);/* 替換以上兩句，變成空心矩形 *//* cxt.strokeStyle = 'yellow'; *//* cxt.strokeRect(40,40,220,120); *//* 替換以上兩句，變成填充色為紅-綠-藍漸變的矩形 */ /* var gnt1 = cxt.createLinearGradient(40,40,260,40);gnt1.addColorStop(0,'red');gnt1.addColorStop(0.5,'green');gnt1.addColorStop(1,'blue');cxt.fillStyle = gnt1;cxt.fillRect(40,40,220,120); */}</script></head><body onload="drawRect();"><!-- 畫布是一矩形區域（圖中虛線框），這里設置id、寬度和高度 --><canvas id="myCanvas" width="300" height="200"></canvas></body> </html>
圖2折線的實現（僅需要替換drawRect()中的代碼）：
var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); /* moveTo()：把路徑移動到畫布中的指定點，不創建線條 */ cxt.moveTo(10,10); /* lineTo()：添加一個新點，然后在畫布中創建從該點到最后指定點的線條 */ cxt.lineTo(150,50); cxt.lineTo(10,50); /* stroke()：繪制已定義的路徑 */ cxt.stroke();
圖3的實現（僅需要替換drawRect()中的代碼）：
var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#CCCCCC"; /* beginPath()：起始一條路徑，或重置當前路徑 */ cxt.beginPath(); /* arc()的參數依次是：圓心x和y坐標、半徑、起始角和結束角（弧度）、是否逆時針 */ cxt.arc(150,100,50,0,Math.PI*1.5,false); /* closePath()：創建從當前點回到起始點的路徑 */ cxt.closePath(); /* fill()：填充當前繪圖（路徑） */ cxt.fill();
?
?
參考資料：
http://www.w3school.com.cn/
http://www.w3school.com.cn/tags/html_ref_canvas.asp
http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html
?
?
不斷學習中。。。
