解决用canvas插入背景图片模糊的办法

本文介绍了一种解决在高分辨率屏幕中使用Canvas绘制图片时出现模糊问题的方法。通过调整Canvas的像素比例并相应地放大绘图区域,使得在不改变显示尺寸的情况下改善了清晰度。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

问题:

用canvas绘制图片的时候会模糊,但是用img显示的时候就不会,canvas和img的大小是相同的 

至于为什么会变模糊,这和浏览器处理 canvas 的方式有关,相关的文章可以参考这篇 High DPI Canvas,这里不作深入介绍。

下面是相关的代码:

[html] view plain copy
  1. <!-- 通过 img 标签引入图片,以便绘制到 canvas 中 -->  
  2. <img src="html5rocks.png" alt="" width="300" height="90">  
[html] view plain copy
  1. <!-- canvas -->  
  2. <canvas width="300" height="90"></canvas>  
  3.   
  4. <script>  
  5.     function init() {  
  6.         var canvas = document.querySelector('canvas');  
  7.         var ctx = canvas.getContext('2d');  
  8.         ctx.drawImage(document.querySelector('img'), 0, 0, 300, 90);  
  9.     }  
  10.     window.onload = init;  
  11. </script>  

解决问题:

其实,不只是绘制图片时会出现模糊的问题,正常情况下,在高清屏的设备下,任何绘制canvas中的图形(包括文字)都会出现模糊的问题。上面这个就是为了解决这个问题,但是他没有处理图片。

接下来,修改绘制图片的代码

将 init 含税修改成下面的代码

[html] view plain copy
  1. function init() {  
  2.     var canvas = document.querySelector('canvas');  
  3.     var ctx = canvas.getContext('2d');  
  4.   
  5.     // polyfill 提供了这个方法用来获取设备的 pixel ratio  
  6.     var getPixelRatio = function(context) {  
  7.         var backingStore = context.backingStorePixelRatio ||  
  8.             context.webkitBackingStorePixelRatio ||  
  9.             context.mozBackingStorePixelRatio ||  
  10.             context.msBackingStorePixelRatio ||  
  11.             context.oBackingStorePixelRatio ||  
  12.             context.backingStorePixelRatio || 1;  
  13.       
  14.         return (window.devicePixelRatio || 1) / backingStore;  
  15.     };  
  16.   
  17.     var ratio = getPixelRatio(ctx);  
  18.       
  19.     // 注意,这里的 width 和 height 变成了 width * ratio 和 height * ratio  
  20.     ctx.drawImage(document.querySelector('img'), 0, 0, 300 * ratio, 90 * ratio);  
  21. }  
这个解决方案本质上是:

不管当前的devicePixelRatio的值是多少,统一将canvasDOM节点的width属性设置为其csswidth属性的两倍,同理将height属性也设置为cssheight属性的两倍,即:

<canvas width="320" height="180" style="width:160px;height:90px;"></canvas>

这样整个 canvas 的坐标系范围就扩大为两倍,但是在浏览器的显示大小没有变,canvas画图的时候,按照扩大化的坐系来显示,不清晰的问题就得以改善了
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值