编程 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 相关文章推荐

使用户点击后退按钮使效三行代码

Jul 07 Javascript

Jquery AutoComplete自动完成的使用方法实例

Mar 19 Javascript

js 点击按钮弹出另一页，选择值后，返回到当前页

May 26 Javascript

修改jquery.lazyload.js实现页面延迟载入

Dec 22 Javascript

JavaScript面向对象(极简主义法minimalist approach)

Jul 17 Javascript

一个检测表单数据的JavaScript实例

Oct 31 Javascript

JavaScript语言对Unicode字符集的支持详解

Dec 30 Javascript

在Mac OS下使用Node.js的简单教程

Jun 24 Javascript

JQuery异步提交表单与文件上传功能示例

Jan 12 Javascript

详解webpack的proxyTable无效的解决方案

Jun 15 Javascript

vue项目首屏打开速度慢的解决方法

Mar 31 Javascript

vue项目打包后上传至GitHub并实现github-pages的预览

May 06 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/01/04 PHP

smarty模板判断数组为空的方法

2015/06/10 PHP

发两个小东西，ASP/PHP 学习工具。用JavaScript写的

2007/04/12 Javascript

对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明

2010/03/20 Javascript

基于jQuery的淡入淡出可自动切换的幻灯插件打包下载

2010/09/15 Javascript

jQuery实现页面滚动时层智能浮动定位实例探讨

2013/03/29 Javascript

快速解决jquery之get缓存问题的最简单方法介绍

2013/12/19 Javascript

jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)

2015/12/31 Javascript

jQuery基础知识点总结(必看)

2016/05/31 Javascript

JavaScript 节流函数 Throttle 详解

2016/07/04 Javascript

JS模拟实现方法重载示例

2016/08/03 Javascript

Vue2.0 slot分发内容与props验证的方法

2017/12/12 Javascript

Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)

2018/10/28 Javascript

vue+openlayers绘制省市边界线

2020/12/24 Vue.js

[01:14]TI珍贵瞬间系列（六）：冠军

2020/08/30 DOTA

Python中__call__用法实例

2014/08/29 Python

使用Python脚本将Bing的每日图片作为桌面的教程

2015/05/04 Python

Linux下将Python的Django项目部署到Apache服务器

2015/12/24 Python

Python实现拷贝/删除文件夹的方法详解

2018/08/29 Python

PyQT实现菜单中的复制,全选和清空的功能的方法

2019/06/17 Python

Django websocket原理及功能实现代码

2020/11/14 Python

python搜索算法原理及实例讲解

2020/11/18 Python

英国体育器材进口商店：UK Sport Imports

2017/03/14 全球购物

丹尼尔惠灵顿手表天猫官方旗舰店：Daniel Wellington

2017/08/25 全球购物

雷曼兄弟的五金店：Lehman’s Hardware Store

2019/04/10 全球购物

迪拜领先运动补剂零售品牌中文站：Sporter商城

2019/08/20 全球购物

可靠的数据流传输TCP

2016/03/15 面试题

C#实现启动一个进程

2016/10/01 面试题

个人自荐信

2013/12/05 职场文书

校庆活动方案

2014/03/31 职场文书

我爱我家教学反思

2014/05/01 职场文书

2014乡镇机关党员个人对照检查材料思想汇报

2014/10/09 职场文书

个人债务授权委托书

2014/10/17 职场文书

小学语文课《掌声》教学反思

2016/03/03 职场文书

MySQL时间盲注的五种延时方法实现

2021/05/18 MySQL

Windows11 Insider Preview Build 25206今日发布更新内容汇总

2022/09/23 数码科技