addcolorのオフセット値を少しずつ変化させたい

首記の件、offset値を少しずつ変化させるために下記ソースコードを作成したのですが、
描画の色に変化がありません。
console.logで確認すると値は変化しているのは確認できるのですが、描画に変化がありません。

やりたい事としては、白い部分を描画の上から下に少しずつ流れていくようなイメージにしたいです。

宜しくお願い致します。

//init
const canvas = document.getElementById('test');
const context = canvas.getContext('2d');
const WIDTH = $('#test').get(0).width = $(window).width();
const HEIGHT =$('#test').get(0).height = $(window).height();

function drawFrame() {
let grad = context.createLinearGradient(250,400,320,700);
for(let i = 0; i <= 1.0; i += 0.1) {
grad.addColorStop(0.3, 'rgb(204,0,0');
grad.addColorStop(i, 'rgb(255,255,255)');
grad.addColorStop(0.9, 'rgb(204,0,0');
context.clearRect(250,400,320,700);
console.log(i);
}

context.beginPath();
context.moveTo(250,500);
context.lineTo(250,600);
context.lineTo(320,600);
context.lineTo(320,700);
context.lineWidth = 4;
context.strokeStyle = grad;
context.stroke();

window.requestAnimationFrame(drawFrame);
}
window.requestAnimationFrame(drawFrame);

No.2 ベストアンサー 回答者： fujillin 回答日時： 2020/12/11 17:28

No1です

どの様にしたいのかよくわからないけれど、とりあえず、ほぼご提示に近い形のままで、色が変化するようにしてみた例です。

・・・ってか、最初にライブラリ（わからんけど、jQueryかな？）を使っているみたいなので、色を変える方にもライブラリ使えばいいんじゃないの？？

const canvas = document.getElementById('test');
const context = canvas.getContext('2d');
const WIDTH = $('#test').get(0).width = $(window).width();
const HEIGHT =$('#test').get(0).height = $(window).height();

let i = 0.1;

function drawFrame() {
let grad = context.createLinearGradient(250,400,320,700);
grad.addColorStop(0.3, 'rgb(204,0,0');
grad.addColorStop(i, 'rgb(255,255,255)');
grad.addColorStop(0.9, 'rgb(204,0,0');
context.clearRect(250,400,320,700);

context.beginPath();
context.moveTo(250,500);
context.lineTo(250,600);
context.lineTo(320,600);
context.lineTo(320,700);
context.lineWidth = 4;
context.strokeStyle = grad;
context.stroke();

i += 0.005;
if(i<0.9) window.requestAnimationFrame(drawFrame);
}
window.requestAnimationFrame(drawFrame);

この回答へのお礼

ありがとうございます。
想像していた通りの内容です。
本当にありがとうございました。

お礼日時：2020/12/11 19:30

No.1 回答者： fujillin 回答日時： 2020/12/11 17:06

こんにちは

＞for(let i = 0; i <= 1.0; i += 0.1) {
＞　　～～
＞}
ループ内で行っているのは、グラデーションの設定だけなので、何も描画していませんよね？
（ですので、ループさせるだけ無駄です）

実際に、描画しているのはループを抜けた後なので、最後の設定が有効となって、それに合った表示になるはずです。
「最後の設定」が都度変わるのなら、繰り返す間に変化してゆきますが、固定値になっているので、同じものを書いては消すという動作になっています。
drawFrameが呼ばれる毎に、少しずつ違う描画になるようにしてください。

※ 前回も申しましたように、「位置を移動するアニメーション」などで充分に原理を理解するようにしたほうが宜しいと思います。