RequestAnimationFrameを正しく使用する方法

Question

拡散アニメーションを作成し、それを達成するためにRequestAnimationFrameを使用しました。プログラムを改善するために何百回も試みました。しかし、うまくいきません。

function draw_point(x, y){ 
    x += 10.5; 
    y += 10.5; 
    radius = 0; 
    var context = $("#canvas_graph")[0].getContext('2d'); 
    window.webkitRequestAnimationFrame(render(x, y, radius, context)); 
}; 

function drawCircle(x, y, radius, context){ 
    context.beginPath(); 
    context.arc(x, y, radius, 0, Math.PI * 2); 
    context.closePath(); 
    context.lineWidth = 2; 
    context.strokeStyle = 'red'; 
    context.stroke(); 
    radius += 0.2; 

    if (radius > 10) { 
     radius = 0; 
     } 
}; 

//The effect of diffusion is achieved by changing the attribute 
function render(x ,y, radius, context){ 
    return function step(){ 
     var prev = context.globalCompositeOperation; 
     context.globalCompositeOperation = 'destination-in'; 
     context.globalAlpha = 0.95; 
     context.fillRect(0, 0, 890, 890); 
     context.globalCompositeOperation = prev; 
     drawCircle(x, y, radius,context); 

     window.webkitRequestAnimationFrame(step); 
    }; 
}; 
draw_point(100， 100)； 

しかし、これは円が何度も何度もglobalAlphaプロパティを使用して軽量化と軽量になっているbigger.Smallラウンドを取得しているlighter.Newly描かれた円を得ているように、globalAlpha属性を使用してレンダリングnormally.Function使用することができます。

var context = $("#canvas_graph")[0].getContext('2d'); 
var radius = 0; 
var x = 100; 
var y = 100; 
function drawCircle(){ 
    context.beginPath(); 
    context.arc(x, y, radius, 0, Math.PI * 2); 
    context.closePath(); 
    context.lineWidth = 2; 
    context.strokeStyle = 'red'; 
    context.stroke(); 
    radius += 0.2; 

if (radius > 10) { 
    radius = 0; 
    } 
}; 
function render(){ 
    var prev = context.globalCompositeOperation; 
    context.globalCompositeOperation = 'destination-in'; 
    context.globalAlpha = 0.95; 
    context.fillRect(0, 0, 890, 890); 
    context.globalCompositeOperation = prev; 
    drawCircle(); 

    window.webkitRequestAnimationFrame(render); 
}; 
window.webkitRequestAnimationFrame(render); 

また、キャンバスアニメーションが上に移動すると、背景を復元する方法は？

Answer 1

draw_pointのように機能を調整してください。あなたが現在すぐrender機能を実行している何を、あなたが質問に `javascript`を持っているどのような問題が

function draw_point(x, y){ 
    x += 10.5; 
    y += 10.5; 
    radius = 0; 
    var context = $("#canvas_graph")[0].getContext('2d'); 
    window.webkitRequestAnimationFrame(function() { 
     render(x, y, radius, context)); 
    } 
};