如何在 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);
}