画布上如何让圆形运动？

Question

有没有人能够提供一个简单的解决方案，使用HTML5画布通过鼠标移动圆圈？我已经阅读了各种框架（如easel、fabrics、paper等），尽管它们都很酷，但我只需要一个小圆圈跟随鼠标指针，这并不值得花费超过100K的代码。

- user1514042

---

你有画圆的代码吗？ 在画布的绘制周期中，使用鼠标X/Y作为圆的偏移量（或在鼠标移动时重新绘制画布）。 - Cerbrus

你考虑过在 div 中放置一张图片，并使用 onmousemove 事件移动它吗？这样可以使其兼容旧版浏览器。 - Gareth Cornish

我有，但是对我来说把所有东西都放在画布上更容易。 - user1514042

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;
});

​

- Loktar

---

非常感谢，我能否让它稍微复杂一点——如果我已经有了一幅图画——如何做到相同的效果但保留我的线条在屏幕上？谢谢。 - user1514042