ctx 代替。 requestAnimationFrame() を使用する場合は、ストロークスタイルを使用します。
<p>ランディング ページの背景キャンバスとして単純なランダムな動きを描画しようとしていますが、線に独自の色を付けるのに苦労しています。 <br /><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;
}
定数色 = [
'#FF1493', // ピンク
'#FF00FF', // マゼンタ
'#800080', // 紫
'#4B0082', // インディゴ
'#0000FF', // 青
'#00FFFF', // シアン
'#00FF00', // 緑
'#FFFF00', // 黄色
'#FF7F00', // オレンジ
'#8B4513' // サドルブラウン
];
関数drawRandomWalk(stPoint, ステップ) {
ctx.globalAlpha = 0.01;
stepCount = 0 にします。
ctx.beginPath();
ctx.ストロークスタイル = stPoint.color;
ctx.moveTo(stPoint.x, stPoint.y);
setTimeout(drawStep, 10);
関数drawStep() {
if (stepCount >= 歩数) {
戻る;
}
ctx.moveTo(stPoint.x, stPoint.y);
const 方向 = Math.random() < 0.5 ? -1 : 1;
stPoint.y = stepSize * 方向;
stPoint.x = startX ステップ数 * 2;
ctx.lineTo(stPoint.x, stPoint.y);
ctx.lineWidth = 1;
ctx.ストローク();
ステップ数;
requestAnimationFrame(drawStep);
}
}
for(色の定数色)
{
const startPoint = 新しいポイント(色);
drawRandomWalk(startPoint, numSteps);
}</pre>
<pre class="brush:html;toolbar:false;"><canvas id="myCanvas" width="600" height="600"></canvas></pre>
<p><br /></p>
