Canvas繪制矩形
????繪制矩形? context.fillRect(x,y,width,height)? strokeRect(x,y,width,height)
? ?x:矩形起點(diǎn)橫坐標(biāo)（坐標(biāo)原點(diǎn)為canvas的左上角，當(dāng)然確切的來說是原始原點(diǎn)，后面寫到變形的時候你就懂了，現(xiàn)在暫時不用關(guān)系）
???? y:矩形起點(diǎn)縱坐標(biāo)
???? width:矩形長度
???? height:矩形高度
創(chuàng)建HTML頁面，設(shè)置畫布標(biāo)簽
編寫js，獲取畫布dom對象
通過canvas標(biāo)簽的Dom對象獲取上下文
設(shè)置繪制樣式、顏色
繪制矩形，或者填充矩形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="demoCanvas" width="500" height="500">
<p>請使用支持HTML5的瀏覽器查看本實(shí)例</p>
</canvas>
<!---下面將演示一種繪制矩形的demo--->
<script type="text/javascript">
//第一步：獲取canvas元素
var canvasDom = document.getElementById("demoCanvas");
//第二步：獲取上下文
var context = canvasDom.getContext('2d');
//第三步：指定繪制線樣式、顏色
context.strokeStyle = "red";
//第四步：繪制矩形，只有線。內(nèi)容是空的
context.strokeRect(10, 10, 190, 100);
//以下演示填充矩形。
context.fillStyle = "blue";
context.fillRect(110,110,100,100);
</script>
</body>
</html>
