直接上带注释的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas矩形</title>
</head>
<body>
<canvas id="canvas1" width="600" height="600">
您的浏览器不支持canvas
</canvas>
<script type="text/javascript">
var canvas1 = document.querySelector("#canvas1")
var ctx = canvas1.getContext("2d")
console.log(ctx)//输出我们能用哪些2d绘画属性
ctx.rect(50,50,300,300) //rect自带矩形，50，50坐标 300是宽、高
ctx.fillStyle="antiquewhite" //填充颜色
ctx.fill() //填充
//设置描边颜色
ctx.strokeStyle="aqua"
//设置描边属性,描边的宽度
ctx.lineWidth=10
//渲染路径，描边
ctx.stroke()
</script>
</body>
</html>
