JavaScript?Canvas實(shí)現(xiàn)高清繪制效果
canvas繪制模糊
在我們?nèi)粘＠L制canvas的時(shí)候都不可避免的遇到一個(gè)問題，那就是canvas繪制出來的東西可能會(huì)有模糊，發(fā)虛
為什么會(huì)模糊呢？那是因?yàn)闆]有考慮到DPR(Device Pixel Ratio)，叫做設(shè)備像素比
什么是設(shè)備像素比，例如你的電腦是1920 * 1280的，那就是橫向有1920個(gè)像素，縱向有1280個(gè)像素，那么是否我們在css里設(shè)置的像素就是我們看到的像素，其實(shí)我們的瀏覽器都有縮放，
例如一個(gè)元素設(shè)置了500 * 500的像素，而瀏覽器的縮放倍率為1.5倍，說明屏幕放大了1.5倍，縮放倍率可以通過window.devicePixelRatio獲取，縮放倍率的大小取決于你的屏幕有多高清，元素占用 500 * 500個(gè)像素的時(shí)候是清晰的，但是屏幕放大了1.5倍導(dǎo)致占用了750 * 750個(gè)像素就導(dǎo)致不清晰了,所以使用canvas繪制的時(shí)候就會(huì)產(chǎn)生這樣一個(gè)問題
解決canvas繪制模糊
有個(gè)這個(gè)縮放倍率之后就可以對canvas進(jìn)行操作，將canvas的放大到寬高乘以縮放倍率，再通過css將寬高修改回原來的大小，這樣canvas繪制出來就是高清的，不過canvas里的內(nèi)容也會(huì)被縮放，因此想保持原來的比例，就要將canvas進(jìn)行同等比例的放大或者縮小
//修改前
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畫布進(jìn)行放大
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();效果圖：
到此這篇關(guān)于JavaScript Canvas實(shí)現(xiàn)高清繪制效果的文章就介紹到這了,更多相關(guān)Canvas高清繪制內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Jquery選擇器分類：基本選擇器，層次選擇器，過濾選擇器，表單選擇器2012-05-05
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
這篇文章主要介紹了jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow(),需要的朋友可以參考下2015-08-08
jQuery EasyUI ProgressBar進(jìn)度條組件
這篇文章主要為大家詳細(xì)介紹了jQuery EasyUI ProgressBar進(jìn)度條組件的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
可能是個(gè)人認(rèn)識(shí)能力有限，一直認(rèn)為僅僅靠html是很難展現(xiàn)稍具動(dòng)態(tài)的圖表的，但是在看到j(luò)qPlot之后，我的認(rèn)識(shí)有了很大改變，jqplpt——基于HTML的圖表展示插件，而且不生成圖片，最可貴的是能生成類似flex的數(shù)據(jù)動(dòng)態(tài)提示以及動(dòng)態(tài)改變數(shù)據(jù)展示范圍等等。2009-07-07
jquery利用ajax調(diào)用后臺(tái)方法實(shí)例
基于JavaScript如何實(shí)現(xiàn)ajax調(diào)用后臺(tái)定義的方法
JQuery獲取樣式中的background-color顏色值的問題