编程 Javascript

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绘图不清晰的解决方案

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

canvas绘图不清晰的解决方案

- Author -

Young Dreamer

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript实现的动态文字变换

Jul 28 Javascript

javascript 表格排序和表头浮动效果(扩展SortTable)

Apr 07 Javascript

extjs render 用法介绍

Sep 11 Javascript

js螺旋动画效果的具体实例

Nov 15 Javascript

AngularJS 自定义过滤器详解及实例代码

Sep 14 Javascript

javascript 内置对象及常见API详细介绍

Nov 01 Javascript

使用jquery datatable和bootsrap创建表格实例代码

Mar 17 Javascript

layui中layer前端组件实现图片显示功能的方法分析

Oct 13 Javascript

checkbox在vue中的用法小结

Nov 13 Javascript

JavaScript解析机制与闭包原理实例详解

Mar 08 Javascript

基于Vue中的父子传值问题解决

Jul 27 Javascript

面试中canvas绘制图片模糊图片问题处理

Mar 13 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中文繁体和简体相互转换的方法

2015/03/21 PHP

php微信开发之谷歌测距

2018/06/14 PHP

PHP创建XML接口示例

2019/07/04 PHP

laravel框架学习笔记之组件化开发实现方法

2020/02/01 PHP

asp 取文本框名称代码

2008/12/02 Javascript

js css样式操作代码（批量操作）

2009/10/09 Javascript

jquery下利用jsonp跨域访问实现方法

2010/07/29 Javascript

基于jQuery替换table中的内容并显示进度条的代码

2011/08/02 Javascript

解决bootstrap中modal遇到Esc键无法关闭页面

2015/03/09 Javascript

Python脚本后台运行的几种方式

2015/03/09 Javascript

js使用DOM操作实现简单留言板的方法

2015/04/10 Javascript

如何实现移动端浏览器不显示 pc 端的广告

2015/10/15 Javascript

javascript基本语法

2016/05/31 Javascript

js动态获取子复选项并设计全选及提交的实现方法

2016/06/24 Javascript

使用vs code开发Nodejs程序的使用方法

2017/09/21 NodeJs

CSS3 动画卡顿性能优化的完美解决方案

2018/09/20 Javascript

jQuery+vue.js实现的多选下拉列表功能示例

2019/01/15 jQuery

详解基于 Node.js 的轻量级云函数功能实现

2019/07/08 Javascript

node.JS事件机制与events事件模块的使用方法详解

2020/02/06 Javascript

python实现百度关键词排名查询

2014/03/30 Python

Python切片用法实例教程

2014/09/08 Python

python3中str（字符串）的使用教程

2017/03/23 Python

Python基于identicon库创建类似Github上用的头像功能

2017/09/25 Python

创建pycharm的自定义python模板方法

2018/05/23 Python

Python实现的读写json文件功能示例

2018/06/05 Python

Python concurrent.futures模块使用实例

2019/12/24 Python

如何在 Django 模板中输出 "{{"

2020/01/24 Python

Python select及selectors模块概念用法详解

2020/06/22 Python

用python监控服务器的cpu,磁盘空间,内存,超过邮件报警

2021/01/29 Python

一款html5 canvas实现的图片玻璃碎片特效

2014/09/11 HTML / CSS

医学生职业生涯规划书范文

2014/03/13 职场文书

2014校长四风问题对照检查材料思想汇报

2014/09/16 职场文书

项目合作协议书

2014/09/23 职场文书

人民调解协议书范本

2014/10/11 职场文书

营运督导岗位职责

2015/04/10 职场文书

Pygame如何使用精灵和碰撞检测

2021/11/17 Python