canvas 绘图解决方案(高清屏下canvas重置尺寸引发的问题的解决)
类别:Web前端 浏览量:2770
时间:2021-10-04 01:40:42 canvas 绘图解决方案
高清屏下canvas重置尺寸引发的问题的解决我们知道,清空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,因而导致绘制效果错乱。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- canvas绘制二进制图片(Canvas获取视频第一帧缩略图的实现)
- canvas3d效果(JavaScript canvas实现七彩太阳光晕效果)
- html5canvas曲线图例子(html5利用canvas实现颜色容差抠图功能)
- 如何使用html5的canvas图(html5 canvas实现给图片添加平铺水印)
- canvas心形水波(Canvas波浪花环的示例代码)
- canvas如何调试(关于canvas.toDataURL 在iOS运行失败的问题解决)
- canvas小程序海报(使用canvas生成含有微信头像的邀请海报没有微信头像问题)
- canvas 动画线段(canvas简单连线动画的实现代码)
- html5的canvas图形绘制技术(导出HTML5 Canvas图片并上传服务器功能)
- html5中canvas标签(html5 canvas绘制网络字体的常用方法)
- html5+canvas动画(解析html5 canvas实现背景鼠标连线动态效果代码)
- canvas实现字体粒子爆炸特效(javascript canvas实现雨滴效果)
- canvas绘制动态线条(5分钟实现Canvas鼠标跟随动画背景)
- 用html5的canvas绘制剪裁图像(Html5 canvas画图白板踩坑)
- html5 canvas绘图(使用html5 canvas绘制圆环动效)
- canvas画布多次渲染失败(深入了解canvas在移动端绘制模糊的问题解决)
- 小敏家 剧情离谱一锅乱炖,但他们俩绝对是这部剧的一大 亮点(剧情离谱一锅乱炖)
- 《倚天屠龙记》再遭翻拍,关晓彤主演赵敏,蒋劲夫演张无忌,你怎么看(倚天屠龙记再遭翻拍)
- 吴启华与曾舜晞两代张无忌同框,戏里经典的他却没活出原著的潇洒(吴启华与曾舜晞两代张无忌同框)
- 经常发这三种 朋友圈 的人,要迅速屏蔽(经常发这三种朋友圈)
- 有种尴尬叫朋友圈忘屏蔽,大学生上演社死现场,父母亲自下场吐槽(有种尴尬叫朋友圈忘屏蔽)
- 朋友圈屏蔽你的人,可以直接看淡了(朋友圈屏蔽你的人)
热门推荐
- mysql快速创建索引(MySQL创建高性能索引的全步骤)
- python中怎样使用列表的sort方法(详解python中sort排序使用)
- SQL中的cast和convert的用法和区别
- php分页函数有什么用(php实现分页功能的详细实例方法)
- html5新增全局属性(HTML5自定义属性的问题分析)
- sql中where和having可以同时用吗(SQL where条件和jion on条件的详解及区别)
- css的字体大全(CSS 常用中文字体 Unicode 编码表)
- python socket 设置通信协议(详解python中TCP协议中的粘包问题)
- mysql执行计划详细解读(详解MySQL的Seconds_Behind_Master)
- laravel获取数据(laravel框架添加数据,显示数据,返回成功值的方法)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9