清潔長方形

Question

我有一個在canvas上繪製矩形的腳本函數。我想在「if」條件下清除長方形的繪製。 我在畫布上也有文字（它的座標是0,80），它不應該被清除。只有矩形必須清潔。

function red_stroke_2(yy) 
{ 
    //Red color edges 
    context.strokeStyle = "#f00"; 
    context.strokeRect(0,yy,800,40); 
} 
if (Option1==answers[qnumber]) 
{ 
    red_stroke_2(80); 
} 

Answer 1

畫布是「無狀態的」，因爲它不知道已經繪製的原語或已創建的調用。因此，只能撤消某個繪圖調用是不可能的。如果您需要修改圖紙，則需要重新繪製所有不想更改的項目。當然你可以選擇更改單個像素，所以如果你的文本是黑色的而矩形是紅色的，你可以替換所有的紅色像素，但是如果啓用了抗鋸齒並且非常複雜的話，這將不會很好。

因此，要麼重繪整個區域（省略矩形繪製，但呈現文本）。或者考慮使用2個Canvas（一個放置文本，一個放置背景），然後您可以重新放置背景而不必擔心文字。

最後但並非最不重要使用SVG可能也是一種選擇，因爲這是有狀態的，包括DOM元素，你可以修改/插入/刪除，瀏覽器將做合成的。在這種情況下，您將有一個rect元素和一個text元素，您可以簡單地刪除前者。

Answer 2

這將使透明的像素，而不是你的矩形：

function clean_red_stroke(yy) 
{ 
    context.clearRect(0,yy,800,40); 
} 
//Call it with the same 'yy' you used in the drawing method 
clean_red_stroke(80); 

不過我想你的代碼可以改進，通過使用更多的變量（因此最通用的功能）的爲例。