javascript - キャンバス アークをマウスの方向に移動する

Question

だから今、私はランダムな色、サイズ、アーク (円) の位置を作成する関数を持つ単純なキャンバス要素を持っています。

これらのランダムな円のランダムな位置を生成する「for」ループは、100 ミリ秒ごとに 1 つの円を実行します (これは onclick で実行されます)。

各円をゆっくりとカーソルに近づけ、カーソルが移動する場所を追跡する方法を知りたいです。

http://jsfiddle.net/JXXgx/

Answer 1

次のようなことを試すことができます：

var MAXIMUM_AMOUNT = 1000,
    FPS = 30,
    targetToGo,     //
    shapes = [];    //storage of circles

//Helper class
function CircleModel(x,y,r,color){
    this.x = x;
    this.y = y;
    this.r = r;   
    this.color = color; 
}
function initScene(){
    //Listening for mouse position changes
    $('canvas').mousemove(function(e){
        targetToGo.x = e.pageX;
        targetToGo.y = e.pageY;
    });
    //Circle generation timer
    var intervalID = setInterval(function(){
        if( shapes.length < MAXIMUM_AMOUNT ){
            for(var i = 0; i < 1; i++){
                //Generating random parameters for circle
                var randX = targetToGo.x - 500 + Math.floor(Math.random() * 1000);   //position x
                var randY = targetToGo.y - 300 + Math.floor(Math.random() * 600);    //position y
                var randRadius = Math.floor(Math.random() * 12);       //radius 
                var randColor = "#"+("000000"+(0xFFFFFF*Math.random()).toString(16)).substr(-6); //color
                //Adding circle to scene
                shapes.push( new CircleModel(randX,randY,randRadius,randColor) ); 
            }
        }else{
            clearInterval(intervalID);
        }
    }, 100);
    //Starts rendering timer -  
    //                  '1000' represents 1 second,as FPS represents seconds,not miliseconds
    setInterval(render,1000/FPS);
}
function render(){
    var ctx = $('canvas')[0].getContext("2d");
    var circle;
    //Clearing the scene
    ctx.clearRect(0,0,$('canvas').width(),$('canvas').height());
    //Drawing circles
    for(var i=0; i < shapes.length;++i){
        circle = shapes[i];
        //(animation part)
        //repositioning circle --
        //             (1/circle.r) is a degree of inertion,and the bigger radius,the slower it moves
        circle.x += (targetToGo.x - circle.x)*1/circle.r;   
        circle.y += (targetToGo.y - circle.y)*1/circle.r;
        ////////////////////////////////////////////
        ctx.fillStyle = circle.color;
        ctx.beginPath();
        ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2, true);
        ctx.closePath();
        ctx.fill();
    }
}

$("canvas").click(function(e){    
    targetToGo = {x: e.pageX, y:e.pageY};
    initScene();   
});

_{このコードを$(document).readyハンドラ内に配置します。}

デモ