1：canvas元素及基本定義與使用；
<canvas id="test" width="400" height="400"></canvas>
if(test.getContext) //判斷是否有畫筆
{
var cdx = test.getContext("2d");//代表2d繪圖
}
2：###canvas繪制矩形
HTML中的元素canvas只支持一種原生的圖形繪制：矩形。所有其他的圖形的繪制都至少需要生成一條路徑
1.繪制矩形
canvas提供了三種方法繪制矩形：
---->繪制一個填充的矩形（填充色默認為黑色）
fillRect(x, y, width, height)
---->繪制一個矩形的邊框（默認邊框為:一像素實心黑色）
strokeRect(x, y, width, height)
---->清除指定矩形區域，讓清除部分完全透明。
clearRect(x, y, width, height)
x與y指定了在canvas畫布上所繪制的矩形的左上角（相對於原點）的坐標。
width和height設置矩形的尺寸。（存在邊框的話，邊框會在width上占據一個邊框的寬度，height同理）
2.strokeRect時，邊框像素渲染問題
按理渲染出的邊框應該是1px的，
canvas在渲染矩形邊框時，邊框寬度是平均分在偏移位置的兩側。
context.strokeRect(10,10,50,50)
:邊框會渲染在10.5 和 9.5之間,瀏覽器是不會讓一個像素只用自己的一半的
相當於邊框會渲染在9到11之間
context.strokeRect(10.5,10.5,50,50)
:邊框會渲染在10到11之間
3.添加樣式和顏色
fillStyle :設置圖形的填充顏色。
strokeStyle :設置圖形輪廓的顏色。
默認情況下，線條和填充顏色都是黑色（CSS 顏色值 #000000）
lineWidth : 這個屬性設置當前繪線的粗細。屬性值必須為正數。
描述線段寬度的數字。 0、 負數、 Infinity 和 NaN 會被忽略。
默認值是1.0。
4.lineWidth & 覆蓋渲染
5.lineJoin
設定線條與線條間接合處的樣式（默認是 miter）
round : 圓角
bevel : 斜角
miter : 直角
<script type="text/javascript">
//
window.onload=function(){
//querySelector
//拿到畫布
var canvas = document.querySelector("#test");
if(canvas.getContext){
var ctx = canvas.getContext("2d");
ctx.fillStyle="deeppink";
ctx.strokeStyle="pink";
ctx.lineWidth=25;
ctx.lineJoin="round";
//注意不加單位
//填充的矩形
//帶邊框的矩形
// 100 : 99.5 --- 100.5(99-101)
// 100.5: 100 --- 101
ctx.strokeRect(100,100,100,100)
ctx.fillRect(0,0,100,100)
// ctx.clearRect(100,100,100,100)
}
}
</script>
//畫布的高寬問題：畫布的高寬在元素中指定，不要用CSS指定，CSS指定會出現問題