如何在 Canvas 上移动形状图像 REALLY()

问题：Canvas 只记住像素，而不是形状或图像

这是一个圆形沙滩球的图像，当然，你不能在图像周围拖动球。

http://i.stack.imgur.com/OEmkE.jpg

你可能会惊讶地发现，就像图像一样，如果你在画布上绘制一个圆圈，则无法在画布上拖动该圆圈。那是因为画布不会记住画圆圈的位置。

// this arc (==circle) is not draggable!!
context.beginPath();
context.arc(20, 30, 15, 0, Math.PI*2);
context.fillStyle='blue';
context.fill();

画布不知道的是什么……

• …你绘制圆圈的地方（它不知道 x，y = [20,30]）。
• …圆的大小（不知道半径= 15）。
• ……圆圈的颜色。 （它不知道圆圈是蓝色的）。

画布知道什么……

Canvas 知道其绘图表面上每个像素的颜色。

画布可以告诉你，在 x，y == [20,30]处有一个蓝色像素，但它不知道这个蓝色像素是否是圆的一部分。

这意味着什么……

这意味着在 Canvas 上绘制的所有内容都是永久性的：不可移动且不可更改。

• 画布无法移动圆圈或调整圆圈大小。
• 画布无法重新着色圆圈或擦除圆圈。
• 画布不能说鼠标是否悬停在圆圈上方。
• 画布不能说圆圈是否与另一个圆圈相撞。
• Canvas 不能让用户拖动 Canvas 周围的圆圈。

但 Canvas 可以给出运动的 ILLUSION

画布可以通过连续擦除圆圈并将其重新绘制在不同的位置来给出运动的错觉。通过每秒多次重绘画布，眼睛被愚弄，看到圆圈在画布上移动。

• 擦除画布

• 更新圆圈的位置

• 重新绘制圆圈的新位置

• 重复，重复，重复……

此代码通过在新位置不断重绘圆圈来给出运动的错觉。

// create a canvas
var canvas=document.createElement("canvas");
var ctx=canvas.getContext("2d");
ctx.fillStyle='red';
document.body.appendChild(canvas);

// a variable indicating a circle's X position
var circleX=20;

// start animating the circle across the canvas
// by continuously erasing & redrawing the circle
// in new positions
requestAnimationFrame(animate);

function animate(){
    // update the X position of the circle
    circleX++;      
    // redraw the circle in it's new position
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.beginPath();
    ctx.arc( circleX, 30,15,0,Math.PI*2 );
    ctx.fill();
    // request another animate() loop
    requestAnimationFrame(animate);
}