如何在不清除畫布的情況下清除正在移動（留下條紋）的畫布元素

假設我在畫布上繪製了一個圓，其上繪製了其他內容，這使得我無法清除畫布 - 由於其他元素被隨機生成如何在不清除畫布的情況下清除正在移動（留下條紋）的畫布元素

var circleX = 50; 
var circleY = 10; 
var moveCircX = 2; 
var moveCircY = 3; 
function createCirc(){ 
    ctx.fillStyle = 'red'; 
    ctx.beginPath(); 
    ctx.arc(circleX, circleY, 10, 0, Math.PI*2, true); 
    ctx.fill(); 

} 
function circMove(){ 
    circleY = (circleY + circMoveY) 
//then validation to stop it from being drawn of the canvas

所以我想要做的是移動圓圈，但從畫布中清除以前繪製的圓圈。那麼是否有解決方案來清除這個圈子，或者創建一個複製這個圈子的精靈會更容易嗎？

來源

2017-09-19 Blue_Screen_Of_Death

畫布背景是靜態還是動態？你說它是隨機的，但一旦它在那裏，它是否會改變？ –

它是靜態的，它並沒有改變（它目前在整個畫布上隨機繪製網格，但不會改變） –

由於您的背景沒有改變，最簡單的策略是先複製背景，然後先畫圓，然後繪製圓。當你移動時，從你保存的副本中重新繪製背景的那部分，然後在新的地方繪製你的圈子。

一個有效的方法是使用getImageData和putImageData。

所以，（我的javascript很生疏，所以這可能不是完美的隨時糾正任何錯誤。），你第一次createCirc之前，簡單地做：

imageData = ctx.getImageData(0,0, ctx.canvas.width, ctx.canvas.height)

而且，在你的circMove功能，您可以移動和重繪圈之前，你想：

ctx.putImageData(imageData, circleX, circleY, circleX, circleY, 2*circle_radius, 2*circle_radius)

（你不定義circle_radius，但我敢肯定，你必須有一個類似的值，我用2倍的半徑大概是。繪製圖像的大小。）

來源

2017-09-19 17:35:13

所以如果我要爲畫布設置動畫（所以它是動態的），我將如何去重繪圓？ –

在這種情況下，這不是問題。每個框架都會動態生成您的畫布，然後在其上畫圓。 :-) –

如何在不清除畫布的情況下清除正在移動（留下條紋）的畫布元素

回答

相關問題