demo.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="cvs"></canvas>
<script>
var cvs = document.getElementById('cvs');
var ctx = cvs.getContext('2d');
/*
* 清除当前路径,开启新路径
* ctx.beginPath()
* */
// 封装一个绘制矩形的函数
function juXing( startX, startY, width, height, lineWidth, strokeStyle ) {
// 放了防止重绘之前的路径,所以先把之前的路径清除掉。开始新的路径
ctx.beginPath();
ctx.moveTo( startX, startY );
ctx.lineTo( startX + width, startY );
ctx.lineTo( startX + width, startY + height );
ctx.lineTo( startX, startY + height );
ctx