javascript - 周りを移動するキャンバス

Question

HTML5キャンバスを使用してマウスで円を移動するための簡単な解決策を投稿できる人はいますか？私はさまざまなフレームワーク（イーゼル、ファブリック、紙など）について読み上げました。それらはすべてかなりクールですが、マウスポインターをたどるのに必要なのは小さな円だけで、10万以上のコードの価値はありません。

Answer 1

ライブデモ

あなたが何も試していないのに、私はおそらくそれをただ与えるべきではありません. とにかく、ここでそれが役立つことを願っています。

var canvas=document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

canvas.width = canvas.height = 500;

var targetX = 0,
    targetY = 0,
    x = 10,
    y = 10,
    velX = 0,
    velY = 0,
    speed = 2;

function update(){
    var tx = targetX - x,
        ty = targetY - y,
        dist = Math.sqrt(tx*tx+ty*ty),
        rad = Math.atan2(ty,tx),
        angle = rad/Math.PI * 180;

        velX = (tx/dist)*speed,
        velY = (ty/dist)*speed;

        x += velX
        y += velY

        ctx.clearRect(0,0,500,500);
        ctx.beginPath();
        ctx.arc(x,y,5,0,Math.PI*2);
        ctx.fill();

    setTimeout(update,10);
}

update();

canvas.addEventListener("mousemove", function(e){
    targetX = e.pageX;
    targetY = e.pageY;
});

</p>