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 相关文章推荐
javascript prototype 原型链
Mar 12 Javascript
向当前style sheet中插入一个新的style实现方法
Apr 01 Javascript
jQuery 文本框得失焦点的简单实例
Feb 19 Javascript
jQuery中odd选择器的定义和用法
Dec 23 Javascript
AngularJS中的过滤器使用详解
Jun 16 Javascript
浅谈JS中逗号运算符的用法
Jun 12 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
Oct 10 Javascript
Bootstrap CSS布局之代码
Dec 17 Javascript
JS实现的JSON序列化操作简单示例
Jul 02 Javascript
javascript简单实现深浅拷贝过程详解
Oct 08 Javascript
Element Alert警告的具体使用方法
Jul 27 Javascript
JS画布动态实现黑客帝国背景效果
Nov 08 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连接mssql的一些相关经验及注意事项
2013/02/05 PHP
基于PHP选项与信息函数的使用详解
2013/05/10 PHP
php中的curl_multi系列函数使用例子
2014/07/29 PHP
CI框架实现创建自定义类库的方法
2018/12/25 PHP
给moz-firefox下添加IE方法和属性
2007/04/10 Javascript
JQuery+JS实现仿百度搜索结果中关键字变色效果
2011/08/02 Javascript
js中的replace方法使用介绍
2013/10/28 Javascript
js创建对象的区别示例介绍
2014/07/24 Javascript
JS中完美兼容各大浏览器的scrolltop方法
2015/04/17 Javascript
JS实现弹性漂浮效果的广告代码
2015/09/02 Javascript
Node.js巧妙实现Web应用代码热更新
2015/10/22 Javascript
AngularJS 让人爱不释手的八种功能
2016/03/23 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
2016/05/26 Javascript
浅析Javascript中bind()方法的使用与实现
2016/05/30 Javascript
AngularJS实现标签页的两种方式
2016/09/05 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
2017/01/03 Javascript
js实现按座位号抽奖
2017/04/05 Javascript
微信小程序中遇到的iOS兼容性问题小结
2018/11/14 Javascript
浅探express路由和中间件的实现
2019/09/30 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
python翻译软件实现代码(使用google api完成)
2013/11/26 Python
基于Django用户认证系统详解
2018/02/21 Python
Tornado Web Server框架编写简易Python服务器
2018/07/28 Python
python socket通信编程实现文件上传代码实例
2019/12/14 Python
python实现数字炸弹游戏程序
2020/07/17 Python
使用python-cv2实现Harr+Adaboost人脸识别的示例
2020/10/27 Python
Python调用ffmpeg开源视频处理库,批量处理视频
2020/11/16 Python
萌新的HTML5 入门指南
2020/11/06 HTML / CSS
linux系统都有哪些运行级别
2016/03/26 面试题
销售人员获奖感言
2014/02/05 职场文书
常务副总经理岗位职责
2014/04/12 职场文书
在职证明书范本(2014新版)
2014/09/25 职场文书
个人租房协议书
2014/11/28 职场文书
2015年班组工作总结
2015/04/20 职场文书
公司新员工欢迎词
2015/09/30 职场文书
NodeJs内存占用过高的排查实战记录
2021/05/10 NodeJs