Moving Canvas Arcs to mouse

Question

Так что прямо сейчас у меня есть простой элемент холста с функциями, которые создают случайные цвета, размеры и положение дуг (кругов).

Цикл «для», который создает случайные положения этих случайных окружностей, выполняет 1 круг каждые 100 миллисекунд (это делается 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 обработчика.}

Demo