问题:
用canvas绘制图片的时候会模糊,但是用img显示的时候就不会,canvas和img的大小是相同的
至于为什么会变模糊,这和浏览器处理 canvas 的方式有关,相关的文章可以参考这篇 High DPI Canvas,这里不作深入介绍。
下面是相关的代码:
- <!-- 通过 img 标签引入图片,以便绘制到 canvas 中 -->
- <img src="html5rocks.png" alt="" width="300" height="90">
- <!-- canvas -->
- <canvas width="300" height="90"></canvas>
- <script>
- function init() {
- var canvas = document.querySelector('canvas');
- var ctx = canvas.getContext('2d');
- ctx.drawImage(document.querySelector('img'), 0, 0, 300, 90);
- }
- window.onload = init;
- </script>
解决问题:
其实,不只是绘制图片时会出现模糊的问题,正常情况下,在高清屏的设备下,任何绘制canvas中的图形(包括文字)都会出现模糊的问题。上面这个就是为了解决这个问题,但是他没有处理图片。
接下来,修改绘制图片的代码
将 init 含税修改成下面的代码
- function init() {
- var canvas = document.querySelector('canvas');
- var ctx = canvas.getContext('2d');
- // polyfill 提供了这个方法用来获取设备的 pixel ratio
- var getPixelRatio = function(context) {
- var backingStore = context.backingStorePixelRatio ||
- context.webkitBackingStorePixelRatio ||
- context.mozBackingStorePixelRatio ||
- context.msBackingStorePixelRatio ||
- context.oBackingStorePixelRatio ||
- context.backingStorePixelRatio || 1;
- return (window.devicePixelRatio || 1) / backingStore;
- };
- var ratio = getPixelRatio(ctx);
- // 注意,这里的 width 和 height 变成了 width * ratio 和 height * ratio
- ctx.drawImage(document.querySelector('img'), 0, 0, 300 * ratio, 90 * ratio);
- }
不管当前的devicePixelRatio
的值是多少,统一将canvas
DOM节点的width属性设置为其css
width属性的两倍,同理将height属性也设置为css
height属性的两倍,即:
<canvas width="320" height="180" style="width:160px;height:90px;"></canvas>