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

jQuery UI Autocomplete 体验分享

Feb 14 Javascript

文本框只能选择数据到文本框禁止手动输入

Nov 22 Javascript

JavaScript实现班级随机点名小应用需求的具体分析

May 12 Javascript

详解js闭包

Sep 02 Javascript

js选择器全面解析

Jun 27 Javascript

浅谈JS中的bind方法与函数柯里化

Aug 10 Javascript

JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端

Oct 08 Javascript

xmlplus组件设计系列之文本框（TextBox)（3）

May 03 Javascript

vue数组对象排序的实现代码

Jun 20 Javascript

微信小程序网络请求封装示例

Jul 24 Javascript

node命令行工具之实现项目工程自动初始化的标准流程

Aug 12 Javascript

解决layer弹出层中表单不起作用的问题

Sep 09 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 多维数组排序实现代码

2009/08/05 PHP

PHP根据传来的16进制颜色代码自动改变背景颜色

2014/06/13 PHP

ThinkPHP实现将本地文件打包成zip下载

2014/06/26 PHP

Smarty使用自定义资源的方法

2015/08/08 PHP

PHP实现通过文本文件统计页面访问量功能示例

2019/02/13 PHP

ThinkPHP 5 AJAX跨域请求头设置实现过程解析

2020/10/28 PHP

封装好的省市地区联动控件附下载

2007/08/13 Javascript

js focus不起作用的解决方法(主要是因为dom元素是否加载完成)

2010/11/05 Javascript

jQuery学习笔记之jQuery选择器的使用

2010/12/22 Javascript

javascript学习笔记(七) js函数介绍

2012/06/19 Javascript

谈谈JavaScript中的函数与闭包

2013/04/14 Javascript

脚本合并提升javascript性能示例

2014/02/24 Javascript

Node.js 的异步 IO 性能探讨

2014/10/08 Javascript

js禁止浏览器的回退事件

2017/04/20 Javascript

JS ES6中setTimeout函数的执行上下文示例

2017/04/27 Javascript

vue快捷键与基础指令详解

2017/06/01 Javascript

Kindeditor单独调用单图上传增加预览功能的实例

2017/07/31 Javascript

微信小程序wx.previewImage预览图片实例详解

2017/12/07 Javascript

深入理解Node module模块

2018/03/26 Javascript

微信小程序自定义弹窗wcPop插件

2018/11/19 Javascript

微信小程序当前时间时段选择器插件使用方法详解

2018/12/28 Javascript

小程序从手动埋点到自动埋点的实现方法

2019/01/24 Javascript

Vue实现日历小插件

2019/06/26 Javascript

JS面向对象编程基础篇（二）封装操作实例详解

2020/03/03 Javascript

浅谈vue中$bus的使用和涉及到的问题

2020/07/28 Javascript

基于vue实现简易打地鼠游戏

2020/08/21 Javascript

[40:27]完美世界DOTA2联赛PWL S3 PXG vs GXR 第一场 12.19

2020/12/24 DOTA

Python内建序列通用操作6种实现方法

2020/03/26 Python

社区禁毒工作方案

2014/06/02 职场文书

社区文明创建工作总结2015

2015/04/21 职场文书

公诉意见书范文

2015/06/05 职场文书

欧也妮葛朗台读书笔记

2015/06/30 职场文书

宾馆安全管理制度

2015/08/06 职场文书

中学总务处工作总结

2015/08/12 职场文书

Nginx性能优化之Gzip压缩设置详解(最大程度提高页面打开速度)

2022/02/12 Servers

电脑开机弹出documents文件夹怎么回事?弹出documents文件夹解决方法

2022/04/08 数码科技