首頁猿問如何清除畫布以重新繪制

如何清除畫布以重新繪制

JavaScript Html/CSS Html5

繁花不似錦 2019-06-09 15:55:41

如何清除畫布以重新繪制在對復(fù)合操作進(jìn)行實驗并在畫布上繪制圖像之后，我現(xiàn)在正在嘗試刪除圖像并進(jìn)行組合。我該怎么做？我需要清除畫布，以重新繪制其他圖像；這可以持續(xù)一段時間，所以我不認(rèn)為每次繪制一個新的矩形將是最有效的選擇。

查看完整描述

3 回答

慕絲7291255

TA貢獻(xiàn)1859條經(jīng)驗獲得超6個贊

如果你在畫線，確保你不要忘記：

context.beginPath();

否則線路就不會被清除。

1 反對回復(fù) 2019-06-09

一只斗牛犬

TA貢獻(xiàn)1784條經(jīng)驗獲得超2個贊

const context = canvas.getContext('2d');context.clearRect(0, 0, canvas.width, canvas.height);

反對回復(fù) 2019-06-09

藍(lán)山帝景

TA貢獻(xiàn)1843條經(jīng)驗獲得超7個贊

用途：`context.clearRect(0, 0, canvas.width, canvas.height);`

這是清除整個畫布的最快和最具描述性的方法。

不要使用：`canvas.width = canvas.width;`

重置canvas.width重置所有畫布狀態(tài)(例如轉(zhuǎn)換、線寬、點擊樣式等)，它非常慢(與ClearRect相比)，它并不能在所有瀏覽器中工作，也沒有描述您實際要做的事情。

處理轉(zhuǎn)換坐標(biāo)

如果您修改了轉(zhuǎn)換矩陣(例如，使用scale, rotate，或translate)然后context.clearRect(0,0,canvas.width,canvas.height)可能不會清除畫布的整個可見部分。

解決辦法？在清除畫布之前重置轉(zhuǎn)換矩陣：

// Store the current transformation matrixcontext.save();
// Use the identity matrix while clearing the canvascontext.setTransform(1, 0, 0, 1, 0, 0);context.clearRect(0, 0, canvas.width, canvas.height);
// Restore the transformcontext.restore();

編輯：我剛剛做了一些分析，并且(在Chrome中)在不重置轉(zhuǎn)換的情況下清除300x150(默認(rèn)大小)畫布的速度大約快了10%。隨著畫布尺寸的增加，這種差異會下降。

這已經(jīng)是相對微不足道的，但在大多數(shù)情況下，您將比您正在清除的更多，我相信這種性能差異是無關(guān)緊要的。

100000 iterations averaged 10 times:1885ms to clear2112ms to reset and clear

反對回復(fù) 2019-06-09

3 回答
0 關(guān)注
3598 瀏覽

關(guān)注

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

如何清除畫布以重新繪制

如何清除畫布以重新繪制

3 回答

用途：`context.clearRect(0, 0, canvas.width, canvas.height);`

不要使用：`canvas.width = canvas.width;`

處理轉(zhuǎn)換坐標(biāo)

相關(guān)問題推薦

添加回答

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

如何清除畫布以重新繪制

如何清除畫布以重新繪制

3 回答

用途：context.clearRect(0, 0, canvas.width, canvas.height);

不要使用：canvas.width = canvas.width;

處理轉(zhuǎn)換坐標(biāo)

相關(guān)問題推薦

添加回答

用途：`context.clearRect(0, 0, canvas.width, canvas.height);`

不要使用：`canvas.width = canvas.width;`