高清屏下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 相关文章推荐
细说CSS3中的选择符
Oct 17 HTML / CSS
css3 box-sizing属性使用参考指南
Jan 08 HTML / CSS
用css3制作纸张效果(外翻卷角)
Feb 01 HTML / CSS
CSS3的first-child选择器实战攻略
Apr 28 HTML / CSS
css3实现可拖动的魔方3d效果
May 07 HTML / CSS
CSS3中新增的对文本和字体的设置
Feb 03 HTML / CSS
IE支持HTML5的解决方法
Oct 20 HTML / CSS
基于第一个PhoneGap(cordova)的应用详解
May 03 HTML / CSS
用html5的canvas画布绘制贝塞尔曲线完整代码
Aug 14 HTML / CSS
在HTML5 Canvas中放入图片和保存为图片的方法
May 03 HTML / CSS
使用Html5中的cavas画一面国旗
Sep 25 HTML / CSS
box-shadow单边阴影的实现
May 21 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
PHP 选项及相关信息函数库
2006/12/04 PHP
php生成扇形比例图实例
2013/11/06 PHP
PHP使用range协议实现输出文件断点续传代码实例
2014/07/04 PHP
php利用smtp类实现电子邮件发送
2015/10/30 PHP
浅谈Laravel中的一个后期静态绑定
2017/08/11 PHP
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
JavaScript中匿名函数用法实例
2015/03/23 Javascript
关于javascript中dataset的问题小结
2015/11/16 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
js实现可控制左右方向的无缝滚动效果
2016/05/29 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
2017/07/21 Javascript
基于node下的http小爬虫的示例代码
2018/01/11 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
2018/08/27 Javascript
解决iView Table组件宽度只变大不变小的问题
2020/11/13 Javascript
python函数缺省值与引用学习笔记分享
2013/02/10 Python
复习Python中的字符串知识点
2015/04/14 Python
Python数据库的连接实现方法与注意事项
2016/02/27 Python
Python 操作MySQL详解及实例
2017/04/30 Python
python语音识别实践之百度语音API
2018/08/30 Python
Python 实现微信防撤回功能
2019/04/29 Python
Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法
2019/06/05 Python
使用 Supervisor 监控 Python3 进程方式
2019/12/05 Python
浅谈python之自动化运维(Paramiko)
2020/01/31 Python
python3+openCV 获取图片中文本区域的最小外接矩形实例
2020/06/02 Python
Python DES加密实现原理及实例解析
2020/07/17 Python
Onzie官网:美国时尚瑜伽品牌
2019/08/21 全球购物
Simons官方网站:加拿大时尚零售商
2020/02/20 全球购物
重阳节登山活动方案
2014/02/03 职场文书
公证书样本
2014/04/10 职场文书
三年级评语大全
2014/04/23 职场文书
英语课前三分钟演讲稿(6篇)
2014/09/13 职场文书
2014年政协工作总结
2014/12/09 职场文书
2015年党员自我剖析材料
2014/12/17 职场文书
实习单位指导教师评语
2014/12/30 职场文书
清明节扫墓活动总结
2015/02/09 职场文书
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js