0
ここに私のコードです。私はキャンバス上にVIBGOYRパターンを作成し、アニメーションのように時間間隔の後にシステムの放射状のグラデーションを変更したいと思います。
setTimeout（）とキャンバスが意図したとおりに動作しない
function activate(index){
canvas =document.getElementById("exp");
context = canvas.getContext('2d');
//Start.
draw(index);
//Functions.
function draw(index){
drawGradiantSq(index);
var t=setTimeout(doTimer,1000);
}
function doTimer(){
draw(index+10);
}
function drawGradiantSq(fi){
console.log(fi);
var g1 = context.createRadialGradient(0,300,0,500,300,fi);
colors = ["violet","indigo","blue","green","orange","yellow","red"];
var x= 1/12;
for (var i=0;i<colors.length;i++){
g1.addColorStop(i*x,colors[i]);
}
context.fillStyle = g1;
context.fillRect(0,0,500,600);
var g2 = context.createRadialGradient(1000,300,0,500,300,fi);
for (var i=0;i<colors.length;i++){
g2.addColorStop(i*x,colors[i]);
}
context.fillStyle = g2;
context.fillRect(500,0,1000,600);
}
}
しかし、タイマーが正常に動作しているようだが、私は唯一取得しています出力は一度だけの勾配を変更します。 HTMLファイル：
<body>
<canvas id="exp" width="1000px" height="600px"></canvas>
<button onclick="activate(index+=10);">Paint</button>
</body>
変数インデックスがsetInterval代わりのsetTimeoutを使用してみてください0
指数は変わらないまま、 '関数doTimerは（）{描画（インデックス+ = 10）;}試みる' – Leonid