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 相关文章推荐
JS解决ie6下png透明的方法实例
Aug 02 Javascript
JQuery结合CSS操作打印样式的方法
Dec 24 Javascript
js表头排序实现方法
Jan 16 Javascript
jquery调取json数据实现省市级联的方法
Jan 29 Javascript
jQuery构造函数init参数分析续
May 13 Javascript
使用JQuery在线制作ppt并在线演示源码特效
Sep 08 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
Jan 25 Javascript
详解如何理解vue的key属性
Apr 14 Javascript
详解Vue demo实现商品列表的展示
May 07 Javascript
JS防抖和节流实例解析
Sep 24 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
Nov 06 Javascript
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
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下用cookie统计用户访问网页次数的代码
2010/05/09 PHP
php在apache环境下实现gzip配置方法
2015/04/02 PHP
php获取错误信息的方法
2015/07/17 PHP
php封装的图片(缩略图)处理类完整实例
2016/10/19 PHP
使用YII2框架实现微信公众号中表单提交功能
2017/09/04 PHP
[对联广告] JS脚本类
2006/08/27 Javascript
刷新时清空文本框内容的js代码
2007/04/23 Javascript
鼠标事件延时切换插件
2011/03/12 Javascript
jQuery的初始化与对象构建之浅析
2011/04/12 Javascript
解决Extjs上传图片无法预览的解决方法
2012/03/22 Javascript
javascript实现一个数值加法函数
2015/06/26 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
2016/05/24 Javascript
一览画面点击复选框后获取多个id值的方法
2016/05/30 Javascript
数组Array的一些方法(总结)
2017/02/17 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
2017/02/20 Javascript
基于angular实现三级联动的生日插件
2017/05/12 Javascript
gulp解决跨域的配置文件问题
2017/06/08 Javascript
捕获未处理的Promise错误方法
2017/10/13 Javascript
微信小程序渲染性能调优小结
2019/07/30 Javascript
基于JavaScript实现简单扫雷游戏
2021/01/02 Javascript
[02:37]TI8勇士令状不朽珍藏II视频展示
2018/06/23 DOTA
[01:18:31]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第一场 1月10日
2021/03/11 DOTA
python实现用于测试网站访问速率的方法
2015/05/26 Python
python GUI实例学习
2017/11/21 Python
python仿evething的文件搜索器实例代码
2019/05/13 Python
pycharm 关闭search everywhere的解决操作
2021/01/15 Python
Django如何重置migration的几种情景
2021/02/24 Python
Superdry瑞典官网:英国日本街头风品牌
2017/05/17 全球购物
中专毕业生自我鉴定
2014/02/02 职场文书
2014领导班子四风问题查摆思想汇报
2014/09/13 职场文书
上课迟到检讨书
2015/05/06 职场文书
2015年司机年终工作总结
2015/05/14 职场文书
2016幼儿园新学期寄语
2015/12/03 职场文书
《藏戏》教学反思
2016/02/23 职场文书
Python安装及建立虚拟环境的完整步骤
2022/06/25 Servers