高清屏下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 相关文章推荐
35款精致的 CSS3 和 HTML5 网页模板 推荐
Aug 03 HTML / CSS
CSS3用@font-face实现自定义英文字体
Sep 23 HTML / CSS
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
May 07 HTML / CSS
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
Dec 30 HTML / CSS
HTML5中使用postMessage实现Ajax跨域请求的方法
Apr 19 HTML / CSS
HTML5 FormData 方法介绍以及实现文件上传示例
Sep 12 HTML / CSS
浅谈cookie和localStorage那些事
Aug 27 HTML / CSS
用HTML5.0制作网页的教程
May 30 HTML / CSS
Html5 audio标签样式的修改
Jan 28 HTML / CSS
Html5适配iphoneX刘海屏的简单实现
Apr 09 HTML / CSS
HTML页面滚动时部分内容位置固定不滚动的实现
Apr 14 HTML / CSS
HTML5页面打开微信小程序功能实现
Sep 23 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实现的生成静态HTML速度快类库
2007/03/31 PHP
PHP下通过系统信号量加锁方式获取递增序列ID
2009/09/25 PHP
PHP简洁函数小结
2011/08/12 PHP
php生成百度sitemap站点地图类函数实例
2014/10/17 PHP
php微信支付之APP支付方法
2015/03/04 PHP
Smarty3配置及入门语法
2017/02/22 PHP
一个不错的应用,用于提交获取文章内容,不推荐用
2007/03/03 Javascript
javascript 自动转到命名锚记
2009/01/10 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
2013/04/12 Javascript
jquery动态分页效果堪比时光网
2014/09/25 Javascript
jquery $(document).ready()和window.onload的区别浅析
2015/02/04 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
JS+CSS实现带小三角指引的滑动门效果
2015/09/22 Javascript
JavaScript中的原始值和复杂值
2016/01/07 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
2016/06/03 Javascript
form表单转Json提交的方法(推荐)
2016/09/23 Javascript
JavaScript数据结构之数组的表示方法示例
2017/04/12 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
2017/06/29 Javascript
微信小程序之绑定点击事件实例详解
2017/07/07 Javascript
jQuery实现的简单前端搜索功能示例
2017/10/28 jQuery
vue toggle做一个点击切换class(实例讲解)
2018/03/13 Javascript
nodejs简单抓包工具使用详解
2019/08/23 NodeJs
python中的多重继承实例讲解
2014/09/28 Python
简单介绍Python中利用生成器实现的并发编程
2015/05/04 Python
Python 操作MySQL详解及实例
2017/04/30 Python
Linux下安装python3.6和第三方库的教程详解
2018/11/09 Python
python re.sub()替换正则的匹配内容方法
2019/07/22 Python
python 修改本地网络配置的方法
2019/08/14 Python
Python基于进程池实现多进程过程解析
2020/04/30 Python
python爬虫scrapy框架的梨视频案例解析
2021/02/20 Python
2014业务员年终工作总结
2014/12/09 职场文书
超市食品安全承诺书
2015/04/29 职场文书
Mysql 如何查询时间段交集
2021/06/08 MySQL
在vue中import()语法不能传入变量的问题及解决
2022/04/01 Vue.js
Java8 CompletableFuture 异步回调
2022/04/28 Java/Android
Vue 打包后相对路径的引用问题
2022/06/05 Vue.js