高清屏下canvas重置尺寸引发的问题的解决


Posted in HTML / CSS onOctober 14, 2019

我们知道,清空canvas画布内容有以下两个方法。

第一种方法是cearRect函数:

context.cearRect(0,0,canvas.width,canvas.height)

第二种方法就是用原值重新设置一下canvas的宽(或者高)

canvas.width = canvas.width
// or 
canvas.height = canvas.height

第二种方法可以起作用,是因为canvas的一个特点:

每当画布的高度或宽度被重设时,画布内容就会被清空。相关内容可以参考 https://www.w3school.com.cn/html5/att_canvas_width.asp

在一个可视化项目中,我们发现在一些电脑上面总是会出现效果错乱的情况。

经过调试,我们发现,原来是“canvas.width = canvas.width”惹的祸。普通屏幕下面下不会有问题,但是如果屏幕是高清屏,就会出现问题。这是因为,高清屏下,我们为了处理绘制图形模糊的问题,通常会做如下处理:

function setupCanvas(canvas) {
        let width = canvas.width,
          height = canvas.height,
          dpr = window.devicePixelRatio || 1.0;
        if (dpr != 1.0 ) {
          canvas.style.width = width + "px";
          canvas.style.height = height + "px";
          canvas.height = height * dpr;
          canvas.width = width * dpr;
          ctx.scale(dpr, dpr);
        }
      }

我们知道,高清屏下window.devicePixelRatio都大于1。所以在绘图之前画笔会被缩放:

ctx.scale(dpr, dpr);

我们知道cavnas是基于状态的绘图组件。 其中缩放比例值也在状态管理之中。 当我们重新设置canvas的宽(高也一样)的时候,不仅会清空canvas的画布内容,同时还会把绘图状态重置到最原始的状态,原始状态下画笔的缩放比例是1,缩放比例值会被重置为1,因而导致绘制效果错乱。
 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
一款利用html5和css3实现的3D滚动特效的教程
Jan 04 HTML / CSS
几个CSS3的flex弹性盒模型布局的简单例子演示
May 12 HTML / CSS
使用CSS3 制作一个material-design 风格登录界面实例
Dec 12 HTML / CSS
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
Aug 15 HTML / CSS
CSS3使用transition属性实现过渡效果
Apr 18 HTML / CSS
html5 touch事件实现触屏页面上下滑动(二)
Mar 10 HTML / CSS
HTML5 canvas实现雪花飘落特效
Mar 08 HTML / CSS
HTML5实现Notification API桌面通知功能
Mar 02 HTML / CSS
HTML5移动端开发中的Viewport标签及相关CSS用法解析
Apr 15 HTML / CSS
基于html5 canvas做批改作业的小插件
May 20 HTML / CSS
详解CSS伪元素的妙用单标签之美
May 25 HTML / CSS
CSS 鼠标点击拖拽效果的实现代码
Dec 24 HTML / CSS
HTML table 表格边框的实现思路
Oct 12 #HTML / CSS
Html5自定义字体解决方法
Oct 09 #HTML / CSS
webView加载html图片遇到的问题解决
Oct 08 #HTML / CSS
使用postMessage让 iframe自适应高度的方法示例
Oct 08 #HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
Oct 08 #HTML / CSS
html2canvas生成清晰的图片实现打印的示例代码
Sep 30 #HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
Sep 27 #HTML / CSS
You might like
兼容PHP5的PHP目录管理函数库
2008/07/10 PHP
PHP学习之输出字符串(echo,print,printf,print_r和var_dump)
2011/04/17 PHP
基于thinkPHP框架实现留言板的方法
2016/10/17 PHP
jQuery学习笔记之jQuery选择器的使用
2010/12/22 Javascript
ES6记录异步函数的执行时间详解
2016/08/31 Javascript
用AngularJS来实现监察表单按钮的禁用效果
2016/11/02 Javascript
nodeJs链接Mysql做增删改查的简单操作
2017/02/04 NodeJs
利用VS Code开发你的第一个AngularJS 2应用程序
2017/12/15 Javascript
webpack构建的详细流程探底
2018/01/08 Javascript
详解webpack之scss和postcss-loader的配置
2018/01/09 Javascript
CountUp.js实现数字滚动增值效果
2019/10/17 Javascript
JS使用正则表达式实现常用的表单验证功能分析
2020/04/30 Javascript
Python的高级Git库 Gittle
2014/09/22 Python
Python中的anydbm模版和shelve模版使用指南
2015/07/09 Python
Django安装配置mysql的方法步骤
2018/10/15 Python
在PyCharm中控制台输出日志分层级分颜色显示的方法
2019/07/11 Python
Django使用uwsgi部署时的配置以及django日志文件的处理方法
2019/08/30 Python
python 两个数据库postgresql对比
2019/10/21 Python
python保存log日志,实现用log日志画图
2019/12/24 Python
用python介绍4种常用的单链表翻转的方法小结
2020/02/24 Python
HTML5 CSS3给网站设计带来出色效果
2009/07/16 HTML / CSS
html5构建触屏网站之网站尺寸探讨
2013/01/07 HTML / CSS
canvas里面如何基于随机点绘制一个多边形的方法
2018/06/13 HTML / CSS
英国布鲁姆精品店:Bloom Boutique
2018/03/01 全球购物
历史学专业个人的自我评价
2013/10/13 职场文书
老总助理工作岗位职责
2014/02/06 职场文书
团队经理竞聘书
2014/03/31 职场文书
公司股份合作协议书
2014/12/07 职场文书
试用期辞职信范文
2015/03/02 职场文书
员工年度工作总结2015
2015/05/18 职场文书
婚庆司仪开场白
2015/05/29 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
导游词之徐州云龙湖
2019/11/19 职场文书
php 原生分页
2021/04/01 PHP
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js
windows server2008 开启端口的实现方法
2022/06/25 Servers