繪制矩形：
getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
fillStyle 方法將其染成紅色，fillRect 方法規定了形狀、位置和尺寸。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style type="text/css"> #myCanvas{ border: 1px dotted #aaaaaa; padding:10px; } </style> </head> <body> <canvas id="myCanvas" width="300" height="200"> </canvas> <script> var c = document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.fillRect(10,10,150,100); </script> </body> </html>
繪制圓形：
創建圓形路徑時需要用到對象的arc方法，方法定義如：XXX.arc(x,y,radius,startAngle,endAngle,anticlockwise)
x為圓形起點的橫坐標，y為圓形起點的縱坐標，radius為圓形半徑，startAngle為開始角度，endAngle為結束角度，anticlockwise是否按順時針方向進行繪制。
XXX.beginPath() 創建路徑，XXX.closePath() 結束路徑，然后XXX.fill() 渲染即可。
<script>
var c = document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#ff0000";
cxt.beginPath();
cxt.arc(50,50,30,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
繪制線條形：
moveTox,y)指定從何處(x,y)開始，lineTo指定在何處結束，來繪制一條線：
然后 調用stroke()實現繪制。
<script>
var c = document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(20,20);
cxt.lineTo(40,90);
cxt.lineTo(80,70);
cxt.lineTo(130,90);
cxt.stroke();
</script>
繪制漸變效果：
使用您指定的顏色來繪制漸變背景，跟繪制普通矩形差不多，只是fillStyle的值為漸變色了而已。
線性漸變：
方法 createLinearGradient(0,0,150,100); 指定了創建線性漸變色范圍
方法 grd.addColorStop(0,"#ff0000");
grd.addColorStop(1,"#00ff00"); 為漸變色指定漸變“開始與結束”
假如你想實現一個上下的線性漸變的效果，那么你應該在調用createLinearGradient(x0,y0,x1,y1) 創建漸變的時候保證點（x0,y0),點(x1,y1)連成的直線為豎直直線，也就是x0=x1。
當然你也可以實現對角線漸變的效果，只要(x0,y0) (x1,y1)組成一條對角線就可以了。
創建上下漸變和對角線漸變可以這樣來：
createLinearGradient(0,0,0,300); // 創建上下漸變
createLinearGradient(10,10,300,300); // 創建對角線漸變
<script>
var c = document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd = cxt.createLinearGradient(0,0,150,100);
grd.addColorStop(0,"#ff0000");
grd.addColorStop(1,"#00ff00");
cxt.fillStyle = grd;
cxt.fillRect(0,0,150,70);
</script>
徑向漸變：
createRadialGradient(x0,y0,r0,x1,y1,r1)
創建一個沿兩個圓之間的錐面繪制漸變。前三個參數代表一個圓心為（x0,y0）半徑為r0的開始圓，后三個參數代表圓心為（x1,y1）半徑為r1的結束圓。
比如 var grd = cxt.createRadialGradient(100,100,30,100,100,70)
就創建了一個由圓心（100,100）半徑為30的圓 ---》 圓心（100,100)半徑為70的圓 的漸變效果。
