HTML5 前端中清除 canvas,可以使用 canvas 上下文的 clearRect() 方法。該方法清除指定的矩形區域,使其完全透明。
以下是如何使用clearRect()清除整個畫布的示例:
const?canvas?=?document.getElementById('myCanvas');const?ctx?=?canvas.getContext('2d');ctx.clearRect(0,?0,?canvas.width,?canvas.height);
在此示例中,我們首先使用 getElementById() 獲取對 canvas 元素的引用。然后,我們使用 getContext(‘2d’) 獲取 canvas 上下文。最后,我們在上下文上調用 clearRect(),傳遞要清除的矩形區域的坐標(在本例中為整個畫布)。
請注意,調用clearRect()不會重置畫布狀態,因此在清除操作后,任何應用于上下文的轉換或樣式仍將生效。如果要完全重置畫布狀態,可以在清除畫布之前調用ctx.save(),在之后調用ctx.restore():
const?canvas?=?document.getElementById('myCanvas');const?ctx?=?canvas.getContext('2d');ctx.save();ctx.clearRect(0,?0,?canvas.width,?canvas.height);ctx.restore();
這將保存當前畫布狀態,清除畫布,然后恢復保存的狀態,有效地將畫布重置為其默認狀態。
Copyright ? 2013-2021 河南云和數據信息技術有限公司 豫ICP備14003305號 ISP經營許可證:豫B-20160281