<!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>
<script>
var oC=document.getElementById("canvas")
var oGC=oC.getContext("2d")
// (x,y,width,height)
// oGC.fillRect(50,50,100,100) fillrect纯色
// oGC.fillStyle="red" 修改颜色
// oGC.strokeRect(50,50,100,100) strokeRect线条
// oGC.clearRect(x,y,oC.width,oC.height) 清除矩形区域 【对应练习小方块运动】
// 练习: 描绘三个并排图形
//原始写法
// oGC.strokeRect(50,50,100,100)
// oGC.strokeRect(150,50,100,100) x+上面图形的宽
// oGC.strokeRect(250,50,100,100)
//便捷写法
for (var i=0;i<3;i++) {
oGC.strokeRect(50*(2*i+1),50,100,100)
}
</script>
</body>
</html>
注意点:画布的比例是1:2，所以样式要写在标签里面，不能写在css样式表里。