1、新建文件并创建画布
2、定义函数获取画布
3、获取上下文
4、设置填充颜色
5、设置边框颜色和边框宽度
6、绘制填充矩形和边框矩形
7、改变填充颜色观察效果
8、附上源码js部分
// JavaScript Document
function draw(id){
var canvas = document.getElementById("canvas");
var context =canvas.getContext("2d");
context.fillStyle = "red";
context.strokeStyle = "#f60";
context.lineWidth = 4;
context.fillRect(0,0,200,200)
context.strokeRect(20,20,70,150);
context.strokeRect(40,40,70,150);
}
html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绘制矩形</title>
<script src="canvas.js"></script>
</head>
<body onLoad="draw('canvas');">
<canvas id="canvas
</body>
</html>