ctx交替。使用requestAnimationFrame()时使用strokeStyle
<p>我试图绘制简单的随机运动作为我的登陆页面的背景画布，我很难让线条具有独特的颜色。<br /><br />我也试过在电影之后改变它，但没有成功(只是看起来是混合的颜色)。</p><p><br /></p>
<p><br /></p>
<pre class="brush:js;toolbar:false;">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);
}</pre>
<pre class="brush:html;toolbar:false;"><canvas id="myCanvas" width="600" height="600"></canvas></pre>
<p><br /></p>
1
959
收藏
问题是，绘制线条的每一支“笔”都是共享状态的——你正在绘制一条由许多移动/线条组成的长路径，一遍又一遍。
如果您想要globalAlpha渐变效果(它依赖于能够一遍又一遍地绘制线条)，您需要分别跟踪每个笔绘制的轨迹，并绘制它，如下所示。
我去掉了Point结构，因为它不是真正需要的。
const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); const numSteps = ctx.canvas.width / 2 + 10; const stepSize = 10; const startX = 0; const startY = canvas.height / 2; const timeInterval = 15; 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(startX, startY, color, nSteps) { setTimeout(drawStep, 10); const steps = [[startX, startY]]; function drawStep() { if (steps.length >= nSteps) { return; } // Draw current line ctx.globalAlpha = 0.01; ctx.beginPath(); ctx.strokeStyle = color; ctx.lineWidth = 1; let x = 0, y = 0; for(let i = 0; i < steps.length; i++) { [x, y] = steps[i]; if(i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y); } ctx.stroke(); // Compute next point const direction = Math.random() < 0.5 ? -1 : 1; y += stepSize * direction; x = startX + steps.length * 2; steps.push([x, y]); requestAnimationFrame(drawStep); } } for(const color of colors) { drawRandomWalk(startX, startY, color, numSteps); }