效果图:
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#cvs {
background-color: #ccc;
}
</style>
</head>
<body>
<div id='container'>
<canvas id='cvs'>
sorry, your browser doesn't support canvas API.
</canvas>
</div>
</body>
<script>
window.onload = function() {
// 获取画布
const cvs = document.querySelector('#cvs')
cvs.width = 800
cvs.height = 800
// 获取画笔
const ctx = cvs.getContext('2d')
// 循环化矩形,黑白各20次
for(let i = 0; i < 20; i++) {
// 从最外层往内部逐个画矩形,最外层黑色矩形起点坐标为(200, 100),宽度为 400,最外层白色矩形起点坐标为(205,105),宽度为 390。因为线宽是 5,每画一个矩形,第二个矩形的横纵坐标偏移 10,宽度减少 10 * 2
drawRect(ctx, 200 + i * 10, 100 + i * 10, 400 - i * 10 * 2, 400 - i * 10 * 2, 5, '#000')
drawRect(ctx, 205 + i * 10, 105 + i * 10, 390 - i * 10 * 2, 390 - i * 10 * 2, 5, '#fff')
}
}
// 封装绘制矩形的函数,传入参数依次为 画笔,矩形横坐标,矩形纵坐标,矩形宽度,矩形高度,矩形线宽,矩形颜色
function drawRect(ctx, x, y, width, height, lineWidth = 1, strokeStyle = '#000') {
// 绘制矩形,两种方式
ctx.beginPath()
// 方式一
// ctx.moveTo(x, y)
// ctx.lineTo(x + width, y)
// ctx.lineTo(x + width, y + height)
// ctx.lineTo(x, y + height)
// ctx.lineTo(x, y)
// ctx.closePath()
// 方式二
ctx.rect(x, y, width, height)
// 设置线宽和颜色
ctx.lineWidth = lineWidth
ctx.strokeStyle = strokeStyle
// 绘制
ctx.stroke()
}
</script>
</html>