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实现贝赛尔曲线轨迹动画的示例代码)
- html5 canvas 特效(JavaScript canvas实现流星特效)
- canvas绘制分辨率(通过canvas转换颜色为RGBA格式及性能问题的解决)
- html5的canvas代码(H5最强接口之canvas实现动态图形功能)
- canvas绘制渐变图形(Canvas实现放大镜效果完整案例分析附代码)
- 使用canvas的好坏(关于canvas绘制模糊问题的解决方法)
- 优秀的canvas背景特效网站(基于canvas实现超炫酷的流水灯效果)
- canvas里面图片如何获取(canvas生成带二维码海报的踩坑记录)
- html5canvas画图有什么用(Html5基于canvas实现电子签名并生成PDF文档)
- canvas两种形式动画(用canvas做一个DVD待机动画的实现代码)
- jscanvas画折线图(js+canvas实现代码雨效果)
- canvas画布多次渲染失败(深入了解canvas在移动端绘制模糊的问题解决)
- canvas小程序海报(使用canvas生成含有微信头像的邀请海报没有微信头像问题)
- canvas如何将一组数据生成柱子图(Canvas环形饼图与手势控制的实现代码)
- canvas绘图画圆基本步骤(利用 Canvas实现绘画一个未闭合的带进度条的圆环)
- canvas 缩放后字发虚(canvas 绘图时位置偏离的问题解决)
- 人从众 火炎焱 全椒再现 正月十六走太平 的魅力(人从众火炎焱全椒再现)
- 官宣 全椒籍明星许海峰 奚秀兰 方芳 王璐瑶携手回家 走太平(全椒籍明星许海峰)
- 以前全椒人是怎么过冬的 满满都是回忆(以前全椒人是怎么过冬的)
- NVIDIA显卡份额冲上88 A饭发愁 游戏优化恐没A卡份了(NVIDIA显卡份额冲上88A饭发愁)
- AMD YES A卡还是N卡 A卡和N卡的区别(AMDYESA卡还是N卡)
- 以后显卡多了一个新选择,N卡和A卡外又多了个I卡(以后显卡多了一个新选择)
热门推荐
- docker运行镜像端口(docker镜像访问本地elasticsearch端口操作)
- 用python做一个表白视频(python仿抖音表白神器)
- vue 手机端tab切换页面不刷新(vue Tab切换以及缓存页面处理的几种方式)
- dedecms如何使用标签(DEDECMS副栏目代码)
- Flask框架踩坑之ajax跨域请求实现(Flask框架踩坑之ajax跨域请求实现)
- 国产云主机哪个好(便宜好用的国内云主机怎么挑选?)
- css3浮动教程(CSS3使用多列制作瀑布流)
- php中怎么分割数组(PHP实现数组根据某个字段进行水平合并,横向合并案例分析)
- mongodb可视化工具
- vue原理详解(vue响应式原理与双向数据的深入解析)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9