好了，讓各位久等了，我們來看一下如何通過Javascript繪制矩形，圓形，線這三種簡單圖形吧。
先來看一下Dome演示
首先我們來學習幾個通用方法
設置繪圖
fillStyle:[value];填充顏色，這個值可以是顏色的值，可以是16進制值，也可以是rgb或rgba色彩；
strokeStyle:[value];線（邊框）顏色，取值同上；
lineWidth:[value];線寬度，是一個數值；
fillRect:矩形填充方法；
strokeRect:矩形畫線方法。
我們就用這些屬性繪制一個新的矩形吧。
[javascript]
//得到畫布上下文，上節已講，在此不多說
function draw() {
canvas = document.getElementById("canvas");
if (canvas.getContext) { //檢測瀏覽器是否兼容
ctx = canvas.getContext("2d"); //你的canvas代碼在這里
return ctx;
}
return null;
}
//畫矩形
function juXing() {
var canvas = draw();//獲得2d繪圖上下文共有方法
canvas.fillStyle = "#2E81CE"; //等同於fillStyle="rgba(46,129,206,1)";
canvas.strokeStyle = "red";
canvas.lineWidth = 2;
canvas.fillRect(10, 10, 100, 120); //填充的四個參數(x,y,width,height)
canvas.strokeRect(10, 10, 100, 120); //線的四個參數(x,y,width,height)
}
[/javascript]
使用路徑
beginPath():打開路徑
繪制弧形（線）：arc(x,y,radius[半徑],startAngle[開始弧度],endAngle[結束弧度],anticlockwise[true順時針繪制,false逆時針繪制])，
這里我們通常會用到Math.PI來設定弧度，顧名思義2*Math.PI即為360度；
moveTo(x,y):移動畫點到x，y坐標，你可以想象為拿起畫筆；
lineTo(x,y):從畫點開始畫線到x，y坐標，你可以想象為使用畫筆；
closePath():關閉路徑；
fill:填充方法；
stroke:畫線方法。
下面我們來畫一個圓和一組平行線
[javascript]
//畫圓形
function Yuan() {
var canvas = draw();
canvas.fillStyle = "#2E81CE"; //等同於fillStyle="rgba(46,129,206,1)";
canvas.beginPath();
canvas.arc(250, 60, 50, 0, 2 * Math.PI, true);
canvas.closePath();
canvas.fill();
}
//畫線
function Xian() {
var canvas = draw();
canvas.strokeStyle = "red";
canvas.lineWidth = 5;
canvas.beginPath();
canvas.moveTo(450, 60);//設置起點
canvas.lineTo(600, 60);//畫線
canvas.moveTo(450, 160);//拿起畫筆到新坐標
canvas.lineTo(600, 160);//畫線
canvas.closePath();
canvas.stroke();
}
[/javascript]
最后看一個基本方法，擦除
clearRect(x,y,width,heigth);要擦除以x，y坐標為起點，width,heigth為長寬的矩形區域里的內容
[javascript]
function Ca() {
var canvas = draw();
canvas.clearRect(0, 0, canvas.width, canvas.height);
}
[/javascript]
Ok，基本圖形的繪制就到這里吧，我們下期見，請關注http://qdgcs.co.cc