JavaScript?Canvas實現(xiàn)高清繪制效果

更新時間：2023年06月08日 16:05:16 作者：格斗家不愛在外太空沉思

在我們?nèi)粘＠L制canvas的時候都不可避免的遇到一個問題，那就是canvas繪制出來的東西可能會有模糊，所以本文為大家準備了解決canvas繪制模糊的方法，希望對大家有所幫助

canvas繪制模糊

在我們?nèi)粘＠L制canvas的時候都不可避免的遇到一個問題，那就是canvas繪制出來的東西可能會有模糊，發(fā)虛

為什么會模糊呢？那是因為沒有考慮到DPR(Device Pixel Ratio)，叫做設(shè)備像素比

什么是設(shè)備像素比，例如你的電腦是1920 * 1280的，那就是橫向有1920個像素，縱向有1280個像素，那么是否我們在css里設(shè)置的像素就是我們看到的像素，其實我們的瀏覽器都有縮放，

例如一個元素設(shè)置了500 * 500的像素，而瀏覽器的縮放倍率為1.5倍，說明屏幕放大了1.5倍，縮放倍率可以通過window.devicePixelRatio獲取，縮放倍率的大小取決于你的屏幕有多高清，元素占用 500 * 500個像素的時候是清晰的，但是屏幕放大了1.5倍導致占用了750 * 750個像素就導致不清晰了,所以使用canvas繪制的時候就會產(chǎn)生這樣一個問題

解決canvas繪制模糊

有個這個縮放倍率之后就可以對canvas進行操作，將canvas的放大到寬高乘以縮放倍率，再通過css將寬高修改回原來的大小，這樣canvas繪制出來就是高清的，不過canvas里的內(nèi)容也會被縮放，因此想保持原來的比例，就要將canvas進行同等比例的放大或者縮小

//修改前
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.lineWidth = 10;
ctx.strokeStyle = "orange";
ctx.moveTo(100, 100);
ctx.lineTo(400, 400);
ctx.stroke();
ctx.closePath();

//修改后
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// 獲取縮放倍率
const getPixelRatio = (context) => {
return window.devicePixelRatio || 1;
};
const ratio = getPixelRatio();
// 保存原來的寬高
const oldWidth = canvas.width;
const oldHeight = canvas.height;
// canvas畫布進行放大
canvas.width = canvas.width * ratio;
canvas.height = canvas.height * ratio;
// 在css里將寬高設(shè)置為原來的大小
canvas.style.width = oldWidth + "px";
canvas.style.height = oldHeight + "px";
// 考慮到內(nèi)容的縮放，將ctx縮放
ctx.scale(ratio, ratio);
ctx.beginPath();
ctx.lineWidth = 10;
ctx.strokeStyle = "orange";
ctx.moveTo(100, 100);
ctx.lineTo(400, 400);
ctx.stroke();
ctx.closePath();

效果圖：