canvas 同时画两条直线，颜色和线宽交替变换,如何才能实现同时绘制不同颜色和宽度的直线啊？
当我开两个定时器准备绘制两条不同颜色和宽度的直线时，出现了问题：
两条线的颜色和宽度都不停地在变换。
代码如下：
当第一条浅在绘制的时候是这样的：
当第二条线开始绘制是就开始变了：
最后，想要实现开多个定时器绘制不同颜色宽度的直线应该怎样实现？
ibeautiful浏览 1879回答 1
1回答
-
largeQ
<!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。
随时随地看视频慕课网APP
相关分类
JavaScript