HTML5中的canvas繪製三個矩形
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>繪製三個矩形</title>
<style>
body{
width: 100%;
height: 100%;
background: black;
}
#canvas{
background: #ffffff;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400">
你的瀏覽器不支援
</canvas>
<!--
注意： canvas 畫布
1.不能在樣式表寫寬高 要在標籤裡面寫
2.body是一個div 高一定是百分百 寬百分百
-->
<!--
獲取元素
在畫布上畫矩形
繪畫環境
-->
<script>
var oC = document.getElementById("canvas")
var oGC = oC.getContext("2d") //獲取繪製圖片的"2d"環境
// oGC.strokeRect(50,50,100,100)
// oGC.strokeRect(150.5,50,100,100)
// oGC.strokeRect(250.5,50,100,100) //繪製填充的"黑色"的矩形
//用變數代替出來 找出i的值
for(var i=0;i<3;i++){
oGC.strokeRect(50.5*(2*i+1),50.5,100,100)
}
</script>
</body>
</html>