首页   >   代码编程   >   WEB前端

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

在之前使用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>

QQ群: 686430774  /  718410762

站长Q: 1347384268

如果文章有帮到你,可以考虑请博主喝杯咖啡!

分享到:

欢迎分享本文,转载请注明出处!

作者:不忘初心

发布时间:2019-05-28

永久地址:https://www.jiweichengzhu.com/article/20845a3c21194d1f8f2f1d7ffa90b919

评论