我們知道，清空canvas畫布內容有以下兩個方法，
第一種方法是cearRect函式：
context.cearRect(0,0,canvas.width,canvas.height)
第二種方法就是用原值重新設定一下canvas的寬（或者高）
canvas.width = canvas.width
// or
canvas.height = canvas.height
第二種方法可以起作用，是因為canvas的一個特點:
每當畫布的高度或寬度被重設時，畫布內容就會被清空，相關內容可以參考https://www.w3school.com.cn/html5/att_canvas_width.asp
在一個可視化專案中，我們發現在一些電腦上面總是會出現效果錯亂的情況，
經過除錯，我們發現，原來是“canvas.width = canvas.width”惹的禍，普通螢屏下面下不會有問題，但是如果螢屏是高清屏，就會出現問題，這是因為，高清屏下，我們為了處理繪制圖形模糊的問題，通常會做如下處理：
function setupCanvas(canvas) {
let width = canvas.width,
height = canvas.height,
dpr = window.devicePixelRatio || 1.0;
if (dpr != 1.0 ) {
canvas.style.width = width + "px";
canvas.style.height = height + "px";
canvas.height = height * dpr;
canvas.width = width * dpr;
ctx.scale(dpr, dpr);
}
}
我們知道，高清屏下window.devicePixelRatio都大于1，所以在繪圖之前畫筆會被縮放:
ctx.scale(dpr, dpr);
我們知道cavnas是基于狀態的繪圖組件， 其中縮放比例值也在狀態管理之中， 當我們重新設定canvas的寬（高也一樣）的時候，不僅會清空canvas的畫布內容，同時還會把繪圖狀態重置到最原始的狀態，原始狀態下畫筆的縮放比例是1，縮放比例值會被重置為1，因而導致繪制效果錯亂，
如果讀者不清楚“高清屏下canvas處理繪制圖形模糊及處理方式”和“canvas的繪制狀態”等知識點不清楚，建議學習相關知識，也推薦有興趣讀者，訂閱我的專欄：
Canvas高級進階 https://xiaozhuanlan.com/canvas，相關知識會在
本文也是摘錄自專欄的部分內容并改編而成的，
歡迎關注公眾號“ITman彪叔”，彪叔，擁有10多年開發經驗，現任公司系統架構師、技術總監、技術培訓師、職業規劃師，在計算機圖形學、WebGL、前端可視化方面有深入研究，對程式員思維能力訓練和培訓、程式員職業規劃有濃厚興趣，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/3806.html
標籤：其他
上一篇：基于記憶性的中值濾波O(r)與O(1)復雜度的演算法實作
下一篇：WebGL簡易教程(十)：光照