当我开两个定时器准备绘制两条不同颜色和宽度的直线时，出现了问题：两条线的颜色和宽度都不停地在变换。代码如下：当第一条浅在绘制的时候是这样的：当第二条线开始绘制是就开始变了：最后，想要实现开多个定时器绘制不同颜色宽度的直线应该怎样实现？
1 回答
largeQ
TA贡献2039条经验 获得超7个赞
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="aa"></canvas>
<script>
let oC = document.getElementById('aa');
let ctx = oC.getContext('2d');
for (let i = 0; i < 100; i++) {
setTimeout(function () {
ctx.beginPath();
ctx.save();
ctx.lineWidth = 5;
ctx.strokeStyle = 'red';
console.log(i, i * 600)
ctx.moveTo(i - 1, i - 1);
ctx.lineTo(i, i);
ctx.stroke();
ctx.restore();
ctx.closePath();
}, i * 600)
}
for (let j = 10; j < 100; j++) {
setTimeout(function () {
ctx.beginPath();
ctx.save();
ctx.strokeStyle = 'blue';
ctx.lineWidth = 10;
ctx.moveTo(j - 1, 10 + j - 1)
ctx.lineTo(j, 10 + j);
ctx.stroke();
ctx.restore();
ctx.closePath();
}, j * 800)
}
</script>
</body>
</html>
每次都需要beginPath和closePath。
添加回答
举报
0/150
提交
取消