Canvas 在高清屏下绘制图片变模糊的解决方法
2016-07-15 11:31
597 查看
问题:
用canvas绘制图片的时候会模糊,但是用img显示的时候就不会,canvas和img的大小是相同的
至于为什么会变模糊,这和浏览器处理
canvas 的方式有关,相关的文章可以参考这篇 High
DPI Canvas,这里不作深入介绍。
下面是相关的代码:
解决问题:
首先,引入
hidpi-canvas
其实,不只是绘制图片时会出现模糊的问题,正常情况下,在高清屏的设备下,任何绘制canvas中的图形(包括文字)都会出现模糊的问题。上面这个就是为了解决这个问题,但是他没有处理图片。
接下来,修改绘制图片的代码
将 init 含税修改成下面的代码
不管当前的
<canvas width="320" height="180" style="width:160px;height:90px;"></canvas>
这样整个 canvas 的坐标系范围就扩大为两倍,但是在浏览器的显示大小没有变,canvas画图的时候,按照扩大化的坐系来显示,不清晰的问题就得以改善了
用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>
解决问题:
首先,引入
hidpi-canvas
其实,不只是绘制图片时会出现模糊的问题,正常情况下,在高清屏的设备下,任何绘制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的值是多少,统一将
canvasDOM节点的width属性设置为其
csswidth属性的两倍,同理将height属性也设置为
cssheight属性的两倍,即:
<canvas width="320" height="180" style="width:160px;height:90px;"></canvas>
这样整个 canvas 的坐标系范围就扩大为两倍,但是在浏览器的显示大小没有变,canvas画图的时候,按照扩大化的坐系来显示,不清晰的问题就得以改善了
相关文章推荐
- git merge和git rebase的区别
- OpenGL学习笔记(一)
- linux系统编程手册 I/O复用
- nginx的配置、虚拟主机、负载均衡和反向代理
- 【BZOJ1968】[Ahoi2005]COMMON 约数研究【数论】
- 1j2ee即web项目,严格意义上来说,没有jsp代码,只有class文件、html文件、javascript文件。2 基于extjs框架的项目怎么怎么查看在浏览器中展示的最终html页面的代码 3
- Elasticsearch与Solr
- H5 学习资源网站
- Comparable<T> 和 Comparator<T>
- iOS内存管理retain,assign,copy,strong,weak
- nvidia gpu fan speed control
- (HttpURLConnection)强制转化
- iOS- define宏定义和const常变量区别
- url中含有中文字符
- gridview 点击行变颜色
- Android开发艺术探索——IPC之Messenger、AIDL
- 将HTML5封装成android应用APK文件的几种方法
- 三、文件搜索命令【基础篇】
- Educational Codeforces Round 14
- HEVC标准概览(五)Profile、Tier和Level