JavaScript Canvas实现高清绘制效果
作者：格斗家不爱在外太空沉思
在我们日常绘制canvas的时候都不可避免的遇到一个问题，那就是canvas绘制出来的东西可能会有模糊，所以本文为大家准备了解决canvas绘制模糊的方法，希望对大家有所帮助
canvas绘制模糊
在我们日常绘制canvas的时候都不可避免的遇到一个问题，那就是canvas绘制出来的东西可能会有模糊，发虚
为什么会模糊呢？那是因为没有考虑到DPR(Device Pixel Ratio)，叫做设备像素比
什么是设备像素比，例如你的电脑是1920 * 1280的，那就是横向有1920个像素，纵向有1280个像素，那么是否我们在css里设置的像素就是我们看到的像素，其实我们的浏览器都有缩放，
例如一个元素设置了500 * 500的像素，而浏览器的缩放倍率为1.5倍，说明屏幕放大了1.5倍，缩放倍率可以通过window.devicePixelRatio获取，缩放倍率的大小取决于你的屏幕有多高清，元素占用 500 * 500个像素的时候是清晰的，但是屏幕放大了1.5倍导致占用了750 * 750个像素就导致不清晰了,所以使用canvas绘制的时候就会产生这样一个问题
解决canvas绘制模糊
有个这个缩放倍率之后就可以对canvas进行操作，将canvas的放大到宽高乘以缩放倍率，再通过css将宽高修改回原来的大小，这样canvas绘制出来就是高清的，不过canvas里的内容也会被缩放，因此想保持原来的比例，就要将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里将宽高设置为原来的大小
canvas.style.width = oldWidth + "px";
canvas.style.height = oldHeight + "px";
// 考虑到内容的缩放，将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();效果图：
到此这篇关于JavaScript Canvas实现高清绘制效果的文章就介绍到这了,更多相关Canvas高清绘制内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！