canvas绘图不清晰的解决方案


Posted in Javascript onFebruary 28, 2017

现象描述

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

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正好是显示尺寸。

也就是说解决方案就是设置舞台的尺寸和图片像素的尺寸一致,显示尺寸为正常显示尺寸;假设canvas的显示尺寸为窗口宽度,创建canvas的时候指定canvas的width属性为2 * body.clientHeight;style.widht为body.clientHeight + 'px';

改变后的效果图如下:

canvas绘图不清晰的解决方案

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Node.js生成HttpStatusCode辅助类发布到npm
Apr 09 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
Jan 13 Javascript
JavaScript获取页面上被选中文字的方法技巧
Mar 13 Javascript
javascript实现table表格隔行变色的方法
May 13 Javascript
apply和call方法定义及apply和call方法的区别
Nov 15 Javascript
JS中Swiper的使用和轮播图效果
Aug 11 Javascript
极简主义法编写JavaScript类
Nov 02 Javascript
详解JS模块导入导出
Dec 20 Javascript
vue实现简单的MVVM框架
Aug 05 Javascript
在vue中使用express-mock搭建mock服务的方法
Nov 07 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
May 02 Javascript
js实现烟花特效
Mar 02 Javascript
jQuery树控件zTree使用方法详解(一)
Feb 28 #Javascript
js数字计算 误差问题的快速解决方法
Feb 28 #Javascript
js数字舍入误差以及解决方法(必看篇)
Feb 28 #Javascript
JS实现浏览器打印、打印预览示例
Feb 28 #Javascript
JS基于面向对象实现的多个倒计时器功能示例
Feb 28 #Javascript
js中删除数组中的某一元素实例(无下标时)
Feb 28 #Javascript
jQuery图片切换动画效果
Feb 28 #Javascript
You might like
PHP 数据结构 算法 三元组 Triplet
2011/07/02 PHP
PHP表单递交控件名称含有点号(.)会被转化为下划线(_)的处理方法
2013/01/06 PHP
基于MySQL分区性能的详细介绍
2013/05/02 PHP
PHP性能优化大全(php.ini)
2016/05/20 PHP
使用jQuery仿苹果官网焦点图特效
2014/12/23 Javascript
再谈JavaScript异步编程
2016/01/27 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
2016/04/06 Javascript
深入理解js函数的作用域与this指向
2016/05/28 Javascript
JS实现微信弹出搜索框 多条件查询功能
2016/12/13 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
2017/01/06 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
2017/02/22 Javascript
微信小程序 图片加载(本地,网路)实例详解
2017/03/10 Javascript
JavaScript使用FileReader实现图片上传预览效果
2020/03/27 Javascript
基于js中this和event 的区别(详解)
2017/10/24 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
2018/06/22 Javascript
vscode中vue-cli项目es-lint的配置方法
2018/07/30 Javascript
Vuex的初探与实战小结
2018/11/26 Javascript
vue.js实现备忘录demo
2019/06/26 Javascript
小程序实现横向滑动日历效果
2019/10/21 Javascript
JavaScript, select标签元素左右移动功能实现
2020/05/14 Javascript
解决vue一个页面中复用同一个echarts组件的问题
2020/07/19 Javascript
python计算程序开始到程序结束的运行时间和程序运行的CPU时间
2013/11/28 Python
Python通过正则表达式选取callback的方法
2015/07/18 Python
Python元组知识点总结
2019/02/18 Python
Python redis操作实例分析【连接、管道、发布和订阅等】
2019/05/16 Python
Python分布式进程中你会遇到的问题解析
2019/05/28 Python
Python + opencv对拍照得到的图片进行背景去除的实现方法
2020/11/18 Python
垃圾回收的优点和原理
2014/05/16 面试题
新闻专业推荐信范文
2013/11/20 职场文书
保护环境的建议书
2014/03/12 职场文书
大学生社会实践活动总结
2014/07/03 职场文书
志愿者爱心公益活动策划方案
2014/09/15 职场文书
教师群众路线学习心得体会
2014/11/04 职场文书
社区艾滋病宣传活动总结
2015/05/07 职场文书
感恩信:写给爸爸妈妈的一封感谢信
2019/09/12 职场文书
Java集成swagger文档组件
2021/06/28 Java/Android