现象描述

  同样大小的图片(60x60px)用canvas和DOM绘制,结果发现canvas的画面质量要差很多。结果如下图所示。

  上图中,左侧红框中的金币采用DOM绘制,右侧和下方的金币和文字等使用canvas绘制,结果canvas绘制的图片模糊不清。

原因分析

  假设dpr = 2;图片大小为60x60px;对dpr有一定的了解基础。
  1.DOM呈现图片过程
  图片——》浏览器css像素(显示尺寸)——》屏幕实际像素
  60x60              30x30                              60x60
  
  图片像素——》实际像素
  1: 1
   
  2.canvas绘制过程
  图片像素——》canvas像素(画布尺寸)——》css像素(显示尺寸)——》屏幕实际像素
  60x60               30x30                              30x30                          60x60
 
  图片像素——》画布像素——》实际像素
  4:                    1:                  4
   
  也就是说,canvas的绘制过程中图片到画布的过程中进行了像素的抽稀,画布到屏幕像素时又进行了插值,所以造成图片质量下降。
  

解决方案

  放大画布的尺寸,但是canvas显示尺寸不变;
  图片像素——》canvas像素(画布尺寸)——》css像素(显示尺寸)——》屏幕实际像素
  60x60               60x60                                           30x30            60x60
 
  图片像素——》实际像素
  1:                1 
 

  而canvas的设计的时候正好有对象的属性来分别管理画布尺寸和显示尺寸;canvas的width、height属性用于管理画布尺寸;canvas的style属性中的width、height正好是显示尺寸; 具体可以参考文章http://www.tuicool.com/articles/7V3qeu
  也就是说解决方案就是设置舞台的尺寸和图片像素的尺寸一致,显示尺寸为正常显示尺寸;假设canvas的显示尺寸为窗口宽度,创建canvas的时候指定canvas的width属性为2 * body.clientHeight;style.widht为body.clientHeight + 'px';
  改变后的效果图如下:

canvas绘图不清晰的解决方案的更多相关文章

  1. HTML5 学习总结(四)——canvas绘图、WebGL、SVG

    一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...

  2. canvas绘图、WebGL、SVG

    目录 一.Canvas 1.1.创建canvas元素 1.2.画线 1.3.绘制矩形 1.4.绘制圆弧 1.5.绘制图像 1.6.绘制文字 1.7.随机颜色与简单动画 二.WebGL 2.1.HTML ...

  3. HTML5 学习笔记(四)——canvas绘图、WebGL、SVG

    一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...

  4. HTML学习总结(四)【canvas绘图、WebGL、SVG】

    一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...

  5. 微信小程序 canvas 绘图问题总结

    业务中碰到微信小程序需要生成海报进行朋友圈分享,这个是非常常见的功能,没想到实际操作的时候花了整整一天一夜才搞好,微信的 canvas 绘图实在是太难用了,官方快点优化一下吧. 业务非常简单,只需要将 ...

  6. canvas绘图,html5 k线图,股票行情图

    canvas绘图,html5 k线图,股票行情图 canvas跟其他标签一样,也可以通过css来定义样式.但这里需要注意的是:canvas的默认宽高为300px * 150px,在css中为canva ...

  7. canvas绘图在手机上边缘粗糙

    辛辛苦苦用canvas绘图,做好动画后,想看看效果,结果在手机上一打开,效果是有了,但是边缘特别粗糙,这怎么可以呢,有一种说法是你用canvas绘图时候在手机retain屏幕上,他把一个像素分为两个像 ...

  8. 解决 canvas 绘图在高清屏中的模糊问题

    解决 canvas 绘图在高清屏中的模糊问题 为什么模糊 CSS 像素是一个抽象单位(1 px),浏览器根据某种规则将 css 像素转化为屏幕需要的实际像素值. 在高清屏之前,屏幕上显示一个像素点需要 ...

  9. HTML新特性--canvas绘图-文本

    一.html5新特性--canvas绘图-文本(重点) #常用方法与属性 -ctx.strokeText(str,x,y);   绘制描边文字(空心) str:绘制文本 x,y:字符串左上角位置(以文 ...

随机推荐

  1. MySQL性能分析及explain的使用说明

    1.使用explain语句去查看分析结果 如explain select * from test1 where id=1;会出现:id selecttype table type possible_k ...

  2. limesurvey设置短调查问卷url

    If you want to use fancy URLs and so not have /index.php in every URL please edit /application/confi ...

  3. 安装pip工具

    Python 2.7.9+ and 3.4+ Good news! Python 3.4 (released March 2014) and Python 2.7.9 (released Decemb ...

  4. java设计模式面试

    设计模式 1. 单例模式:饱汉.饿汉.以及饿汉中的延迟加载,双重检查 2. 工厂模式.装饰者模式.观察者模式. 3. 工厂方法模式的优点(低耦合.高内聚,开放封闭原则) 单例模式 分类:懒汉式单例.饿 ...

  5. xamarin mac 之 资料

    中文社区 xamarin.form 30天学习计划

  6. Unity中使用多构造函数

    如果要实例化的类只有一个构造函数, 则使用方法很简单使用方法如下: 1 2 3 4 5 6 7 using (IUnityContainer container = new UnityContaine ...

  7. Apache/nginx转发设置-分布式部署

    Apache转发设置1. Weblogic安装 Weblogic8和Weblogic10默认安装,选择完全安装即可,如果是Weblogic9则选择自定义安装,勾选WebService plugin 2 ...

  8. html块级元素和内联元素区别详解

    块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示; 宽度(width).高度(height).内边距(padding)和外边距(margin)都可控制; ...

  9. iOS 错误 之 Potential leak of an object stored into 'cs'

    存储到 “cs”的对象存在潜在的泄露

  10. php防止重复提交表单

    解决方案一:引入cookie机制来解决 提交页面代码如下a.php代码如下: <form id="form1" name="form1" method=& ...