1.HTML代码
<html>
<head>
<title>canvas</title>
</head>
<body>
<canvas id="canvas" width='900' height='600' style='border:1px solid red;'></canvas>
</body>
</html>
2.JS CANVAS
<script>
//获取canvas上下文为ctx
var ctx=document.getElementById("canvas").getContext('2d')；
//设置canvas线的宽度
ctx.lineWidth=5;
//设置canvas画笔的颜色
ctx.strokeStyle="rgb(255,0,0)";
//利用canvas画笔画矩形图 ctx.strokeRect(x,y,宽度，高度)
ctx.strokeRect(100，50，200，300)；
//利用canvas画出实心矩形
ctx.fillStyle="rgb(0,255,0)";
ctx.fillRect(100,80,100,200);
//在实心矩形上面添加边框
ctx.strokeRect(100,80,100,200);
</script>