Html5中新增標籤有canvas
canvas是一個用來展示繪圖效果的標籤，它和img類似，都是行內塊元素。
同一個頁面可以擁有多個canvas標籤。
畫布預設300*150，要設定畫布的寬高，需要藉助canvas元素的屬性。

<canvas id="cvs" width="500" height="500"></canvas>

var cvs=document.getElementById('cvs');
var ctx=cvs.getContext('2d');

canvas中有很多的方法和屬性，都需要寫在Javascript指令碼中的：

方法：
ctx.moveTo(x軸移動的座標，y軸移動的座標);
ctx.lineTo(x軸移動的座標，y軸移動的座標);
ctx.stroke();//描邊路徑
ctx.closePath();//閉合路徑，最後一條邊可以省去，去鋸齒的情況下
ctx.beginPath();//為了防止重繪之前的路徑，所以把之前的路徑清除掉
ctx.fill();//填充，把當前路徑環繞起來的區域進行填充
ctx.rect(起始x軸座標,起始y軸座標,寬，高);//畫一個矩形路徑
ctx.strokeRect(起始x軸座標,起始y軸座標,寬，高);//繪製一個描邊矩形，不會產生路徑
ctx.fillRect(起始x軸座標,起始y軸座標,寬，高);//繪製一個填充矩形，不會產生路徑
ctx.clearRect(起始x軸座標,起始y軸座標,寬，高);//按照矩形的大小來清除畫布中指定位置的內容，清楚後，可以重新繪製圖形
ctx.setLineDash([1,2]);//設定畫線的時候空白部分和實現部分的大小
ctx.getLineDash();//獲取線條繪製規則


屬性：
ctx.strokeStyle=css任意的顏色表示;//設定描邊顏色，必須放在繪製之前
ctx.lineWidth=5;//設定線寬，必須放在繪製之前
ctx.fillStyle=顏色表示;//填充色
ctx.lineCap='butt','round','square';//設定線帽樣式
--butt：是預設值
--round：線頭是圓的，兩端的圓的半徑為線寬的一半
--square：線頭兩端各增加線寬的一半
ctx.lineJoin='miter','round','bevel';//設定線交點樣式
--miter：是預設值，兩邊向外相交為尖角
--round：兩邊向外相交是圓頭
--bevel：兩邊相連為一個斜面
ctx.lineDashOffset=3;//設定虛線繪製時的偏移量