<html>
<body>
<canvas id="mycanvas" style="width:200px;height:100px;border:2px solid lime;"></canvas>
<script>
var ctx=mycanvas.getContext("2d");
ctx.fillStyle="lime"; //矩形的颜色
ctx.fillRect(20,20,20,20); //矩形 离canvas left 20px , 离canvas top 20px ,矩形的宽,矩形的高
// alert(ctx);
</script>
</body>
<body>
<canvas id="mycanvas" style="width:200px;height:100px;border:2px solid lime;"></canvas>
<script>
var ctx=mycanvas.getContext("2d");
ctx.fillStyle="lime"; //矩形的颜色
ctx.fillRect(20,20,20,20); //矩形 离canvas left 20px , 离canvas top 20px ,矩形的宽,矩形的高
// alert(ctx);
</script>
</body>
</html>
<!--说明:
fillStyle 方法将其染成红色,
fillRect 方法规定了形状、位置和尺寸。
getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
-->