您现在的位置是:网站首页 > 代码编程 > 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>

canvas

看完文章,有任何疑问,请加入群聊一起交流!!!

很赞哦! ()

文章评论

  • 请先说点什么
    人参与,条评论

请使用电脑浏览器访问本页面,使用手机浏览器访问本页面会导致下载文件异常!!!

雨落无影

关注上方公众号,回复关键字【下载】获取下载码

用完即删,每次下载需重新获取下载码

若出现下载不了的情况,请及时联系站长进行解决

站点信息

  • 网站程序:spring + freemarker
  • 主题模板:《今夕何夕》
  • 文章统计:篇文章
  • 标签管理标签云
  • 微信公众号:扫描二维码,关注我们