什麼是畫布
HTML5 的 canvas 元素使用 JavaScript 在網頁上繪製圖像。
畫布是一個矩形區域，您可以控制其每一像素。
canvas 擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。
具體問題可以參考HTML 5 Canvas這裏就不多做解釋，直接上案例。
案例1
像一個這種的怎麼使用畫布繪圖呢，其實很簡單，首先先給畫布一個500*500的面積，之後就可以在裏面繪圖了，先畫一個三角形，在畫個矩形就可以了，三角形添加填充顏色，大矩形裏面的兩個矩形都可以使用，直接上代碼：
<body>
<canvas id="cavsElem">
你的瀏覽器不支持畫布
</canvas>
<script>
var canvas=document.getElementById('cavsElem'); //獲得畫布
var context=canvas.getContext('2d'); //獲得上下文
var context1=canvas.getContext('2d')
//設置標籤的屬性寬高和邊框
canvas.width=500;
canvas.height=500;
canvas.style.border="1px solid #000"; //畫布的線條的寬度顏色類型
//開始繪製三角形
context.strokeStyle="red";
context.fillStyle="green";
context.beginPath(); //開始路徑
context.moveTo(200,50);
context.lineTo(50,150);
context.lineTo(350,150);
context.closePath(); //關閉結束
context.strokeStyle = "red"; //設置描邊顏色
context.lineWidth = 5;
context.stroke(); //描邊路徑
context.fillStyle = 'green'; //填充顏色
context.fill(); //填充顏色，默認黑
context.lineWidth=5;
context.strokeRect(50,150,300,150);
context.strokeRect(80,180,80,80);
context.fillRect(250,200,60,100);
context.fill();
context.stroke();
</script>
</body>
案例圓弧
上面就使用到了畫布的圓弧操作：
<body>
<canvas id="cavsElem">您的瀏覽器不支持canvas標籤</canvas>
<script>
var canvas=document.getElementById('cavsElem');
var context=canvas.getContext('2d');
canvas.width=500;
canvas.height=500;
canvas.style.border="1px solid #000";
context.beginPath();
context.lineWidth=5;
context.strokeStyle="green";
context.arc(100,100,80,2*Math.PI/3,3*Math.PI/2);
context.fillStyle="red";
context.fill();
context.stroke();
context.beginPath();
context.lineJoin="round";
context.moveTo(100,20);
context.lineTo(300,20);
context.lineTo(60,170);
context.stroke();
</script>
</body>
案例圓
在畫布上畫圓
<body>
<canvas id="cavsElem" style="background-color:gray" width="300px" height="300px">
您的瀏覽器不支持canvas標籤。
</canvas>
<script>
var context=document.getElementById('cavsElem').getContext('2d');
context.beginPath();
context.arc(150,150,120,0,2*Math.PI,true);
context.closePath();
context.strokeStyle= 'red';
context.stroke();
context.beginPath();
context.arc(150,150,100,0,2*Math.PI,true);
context.closePath();
context.strokeStyle= 'red';
context.stroke();
context.beginPath();
context.moveTo(150,30)
context.lineTo(150,50)
context.closePath();
context.strokeStyle = 'red';
context.stroke()
context.beginPath();
context.moveTo(150,250)
context.lineTo(150,270)
context.closePath();
context.strokeStyle = 'red';
context.stroke()
context.beginPath();
context.moveTo(30,150)
context.lineTo(50,150)
context.closePath();
context.strokeStyle = 'red';
context.stroke()
context.beginPath();
context.moveTo(250,150)
context.lineTo(270,150)
context.closePath();
context.strokeStyle = 'red';
context.stroke()
context.beginPath();
context.moveTo(65,65)
context.lineTo(79,79)
context.closePath();
context.strokeStyle = 'red';
context.stroke()
context.beginPath();
context.moveTo(235,65)
context.lineTo(220,79)
context.closePath();
context.strokeStyle = 'red';
context.stroke()
context.beginPath();
context.moveTo(65,235)
context.lineTo(79,220)
context.closePath();
context.strokeStyle = 'red';
context.stroke()
context.beginPath();
context.moveTo(235,235)
context.lineTo(220,220)
context.closePath();
context.strokeStyle = 'red';
context.stroke()
</script>
</body>
案例漸變色
<body>
<canvas id="cavsElem">
您的瀏覽器不支持canvas標籤。
</canvas>
<script>
var canvas=document.getElementById('cavsElem');
var context=canvas.getContext('2d');
canvas.width=500;
canvas.height=500;
context.arc(250,250,200,0,2*Math.PI);
lg2 = context.createLinearGradient(100,100,400,400);
lg2.addColorStop(0 , "#FF0033");
lg2.addColorStop(0.5, "#FFFFFF");
lg2.addColorStop(1 , "#87CEFA");
context.fillStyle = lg2;
context.fill();
context.strokeStyle = lg2;
context.stroke();
</script>
</body>
注意：createLinearGradient(100,100,400,400)，這裏面的兩個參數context.createLinearGradient(x0,y0,x1,y1)
可以參考HTML5 canvas createLinearGradient() 方法