您现在的位置是：网站首页 > 代码编程 > WEB前端WEB前端

【原】canvas在mac和2k高清屏下绘图模糊的解决方法

不忘初心 2019-05-28 围观() 评论() 点赞() 【WEB前端】

简介：在之前使用canvas绘制网站logo时，发现logo图片会出现模糊的情况，在家里的2k屏上看到是模糊的，今天在公司的mac上面看到也是模糊的，因为分辨率过高而导致将图片放大了一倍。

在之前使用canvas绘制网站logo时，发现logo图片会出现模糊的情况，在家里的电脑上看到是模糊的，今天在公司的mac上面看到也是模糊的，但是在公司的外接显示屏上没问题，瞬间反应过来了，家里的电脑也是2k的高清屏，所以这个问题肯定是屏幕分辨率太高导致的。

在高清屏下的图，截屏了也会放大，如下图：

canvas在mac和2k高清屏下绘图模糊的解决方法

在普通屏下，就不会缩放：

canvas在mac和2k高清屏下绘图模糊的解决方法

两次截图时的尺寸是一样的，第一张图被放大了一倍（我在使用mac的时候，每次截图时都对此深恶痛绝），这也就是为什么在高清屏中logo会模糊的原因。

解决方案：

1、使用window.devicePixelRatio找出设备屏幕的缩放比例

window.devicePixelRatio

2、在绘图的时候，对画布和context设置相应的比例

<!-- 对于高清屏，需要配置相应的缩放比例，mac和2k高清屏需要放大一倍 -->
<canvas id="canvas" width="340" height="156" style="width:170px;height:78px"></canvas>

context.scale(2, 2); //设置缩放比例，防止高清屏模糊

完整代码：

<!doctype html>
<html>
<head>
	<title>test</title>
</head>
<body onload="draw('canvas')">

	<!-- 用window.devicePixelRatio找出屏幕的缩放比例，我的mac和家里的电脑都是：2 -->

	<!-- 对于高清屏，需要配置相应的缩放比例，mac和2k高清屏需要放大一倍 -->
	<canvas id="canvas" width="340" height="156" style="width:170px;height:78px"></canvas>

	<script type="text/javascript">
		function draw(id){
		    var canvas = document.getElementById(id);
		    var context = canvas.getContext('2d'); //获取对应的2D对象(画笔)

		    context.scale(2, 2); //设置缩放比例，防止高清屏模糊

		    context.fillStyle = '#FF5E52'; //设置填充的背景颜色,rgba(255,255,255,0)是透明png背景色
		    context.fillRect(0,0,170,78); //绘制矩形

		    context.fillStyle = '#fff'; //设置填充的颜色
		    context.strokeStyle = '#fff'; //设置画笔的颜色

		    context.font = "30px '微软雅黑'"; //设置字体
		    context.fillText('积微成著', 25 , 40); //设置文案、坐标

		    context.font = "12px '微软雅黑'";
		    context.fillText('不积跬步无以至千里', 35, 62); //设置文案、坐标
		}
	</script>
</body>
</html>