效果图：
完整代码：
<!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>
359
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
