P粉605385621 2023-08-01 16:06:12 0 1 244
我试图绘制简单的随机运动作为我的登陆页面的背景画布,我很难让线条具有独特的颜色。
我也试过在电影之后改变它,但没有成功(只是看起来是混合的颜色)。
const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); //ctx.canvas.width = window.innerWidth; //ctx.canvas.height = window.innerHeight*4; const numSteps = ctx.canvas.width / 2 + 10; const stepSize = 10; const startX = 0; const startY = canvas.height / 2; const timeInterval = 15; var Point = function(color_inp){ this.x = startX; this.y = startY; this.color = color_inp; } const colors = [ '#FF1493', // Pink '#FF00FF', // Magenta '#800080', // Purple '#4B0082', // Indigo '#0000FF', // Blue '#00FFFF', // Cyan '#00FF00', // Green '#FFFF00', // Yellow '#FF7F00', // Orange '#8B4513' // Saddle Brown ]; function drawRandomWalk(stPoint, steps) { ctx.globalAlpha = 0.01; let stepCount = 0; ctx.beginPath(); ctx.strokeStyle = stPoint.color; ctx.moveTo(stPoint.x, stPoint.y); setTimeout(drawStep, 10); function drawStep() { if (stepCount >= steps) { return; } ctx.moveTo(stPoint.x, stPoint.y); const direction = Math.random() < 0.5 ? -1 : 1; stPoint.y += stepSize * direction; stPoint.x = startX + stepCount * 2; ctx.lineTo(stPoint.x, stPoint.y); ctx.lineWidth = 1; ctx.stroke(); stepCount++; requestAnimationFrame(drawStep); } } for(const color of colors) { const startPoint = new Point(color); drawRandomWalk(startPoint, numSteps); }
<canvas id="myCanvas" width="600" height="600"></canvas>
P粉327903045 采纳为最佳 2023-08-02 00:56:35 1楼
问题是,绘制线条的每一支“笔”都是共享状态的——你正在绘制一条由许多移动/线条组成的长路径,一遍又一遍。
如果您想要globalAlpha渐变效果(它依赖于能够一遍又一遍地绘制线条),您需要分别跟踪每个笔绘制的轨迹,并绘制它,如下所示。
我去掉了Point结构,因为它不是真正需要的。
赞 +0 添加回复