更新時(shí)間:2023年05月09日17時(shí)57分 來源:傳智教育 瀏覽次數(shù):
HTML5 前端中清除 canvas,可以使用 canvas 上下文的 clearRect() 方法。該方法清除指定的矩形區(qū)域,使其完全透明。
以下是如何使用clearRect()清除整個(gè)畫布的示例:
const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height);
在此示例中,我們首先使用 getElementById() 獲取對 canvas 元素的引用。然后,我們使用 getContext('2d') 獲取 canvas 上下文。最后,我們在上下文上調(diào)用 clearRect(),傳遞要清除的矩形區(qū)域的坐標(biāo)(在本例中為整個(gè)畫布)。
請注意,調(diào)用clearRect()不會(huì)重置畫布狀態(tài),因此在清除操作后,任何應(yīng)用于上下文的轉(zhuǎn)換或樣式仍將生效。如果要完全重置畫布狀態(tài),可以在清除畫布之前調(diào)用ctx.save(),在之后調(diào)用ctx.restore():
const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); ctx.save(); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.restore();
這將保存當(dāng)前畫布狀態(tài),清除畫布,然后恢復(fù)保存的狀態(tài),有效地將畫布重置為其默認(rèn)狀態(tài)。
北京校區(qū)