canvas宽高技巧(canvas画图被放大且模糊的解决方法)
类别:Web前端 浏览量:2590
时间:2021-10-18 11:33:40 canvas宽高技巧
canvas画图被放大且模糊的解决方法先来理解canvas的这几个宽度和高度
canvas.width是画布的大小,而canvas.style.width是浏览器渲染的canvas的尺寸
第一个问题:画布的高度和宽度
画布的宽和高一定要在canvas标签中设置,如果是在css样式中设置,则不起作用,画布会按照默认尺寸width:300px,height:150px显示
//在标签中设置宽和高 <canvas id="canvas" width="324" height="622" >
除了直接在canvas标签设置,还可以在绘制的时候设置,注意画布的宽高不需要单位
canvas.width = 324; canvas.height = 622;
第二个问题:绘制的图形被放大,图像模糊
这是由于手机的设备独立像素和物理像素不一致,设备像素比=物理像素/设备独立像素,大部分手机的设备像素比为2,这意味着100px的图像要放在200px中才可以正常显示
用devicePixelRatio可以获取到设备像素比,获取到像素比后,我们就可以控制图形的缩放比例
scale = window.devicePixelRatio;
刚刚说了,canvas.style.width是浏览器渲染的canvas的尺寸,那要想你画的图形正确且清楚的显示在画布中,你需要设置正确的style.width和style.height,如下图,注意加上单位。
canvas.style.width = canvas.width / scale + 'px'; canvas.style.height= canvas.height/ scale + 'px';
上面我们设置了画布的宽度为324,如果不设置style.width,则画的图形会被放大到2倍显示。
到此这篇关于canvas画图被放大且模糊的解决方法的文章就介绍到这了,更多相关canvas图被放大且模糊内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
您可能感兴趣
- canvas3d效果(JavaScript canvas实现七彩太阳光晕效果)
- 获取canvas画布内容(清除canvas画布内容点擦除+线擦除)
- canvas图片显示报错(html2canvas生成的图片偏移不完整的解决方法)
- canvas小程序海报(使用canvas生成含有微信头像的邀请海报没有微信头像问题)
- canvas绘制渐变图形(Canvas实现放大镜效果完整案例分析附代码)
- canvas指定区域生成图片(canvas实现图片镜像翻转的2种方式)
- canvas动态图(canvas绘制太极图的实现示例)
- 使用canvas画个正方形(canvas绘制树形结构可视图形的实现)
- canvas 缩放后字发虚(canvas 绘图时位置偏离的问题解决)
- canvas绘制图像文件方法(Canvas多边形绘制的实现方法)
- canvas实现字体粒子爆炸特效(javascript canvas实现雨滴效果)
- jscanvas画折线图(js+canvas实现代码雨效果)
- html使用canvas画矩形(CSS、SVG和canvas分别实现文本文字纹理叠加效果)
- canvas时钟代码(canvas实现烟花的示例代码)
- canvas怎么压缩图片(使用canvas压缩图片大小的方法示例)
- html5canvas动画(html5 canvas 实现光线沿不规则路径运动)
- 《精英律师》剧照首曝光,实力演员飙戏,演绎律政职场百态(精英律师剧照首曝光)
- 靳东领衔打造高精职场 新丽出品《精英律师》曝定妆照(靳东领衔打造高精职场)
- 靳东新剧《精英律师》定档,众星云集,这剧可追(靳东新剧精英律师定档)
- 精英律师 廖佳敏封印恋情曝光,顾婕马失前蹄 你个老不死的(廖佳敏封印恋情曝光)
- 以家人之名广受好评,剧情生动引起观众共鸣,演员张新成圈粉无数(以家人之名广受好评)
- 三兄妹感情再遇波折,人设接连崩塌 《以家人之名》剧情猜不透(三兄妹感情再遇波折)
热门推荐
- laravel怎么设置自定义(laravel实现于语言包的完美切换方法)
- pyclips入门(phpinfo的知识点总结)
- 云服务器git(详解在阿里云上搭建自己的git服务器)
- 织梦怎么添加图片(织梦怎么去掉上传图片的水印改为自己设计的水印)
- mysql8.0.25安装及配置超详细教程(MySQL8.0.21安装步骤及出现问题解决方案)
- docker执行shell脚本(基于Docker搭建ELK 日志系统的方法)
- vue2和vue3都如何创建项目(vue3.0+vite2实现动态异步组件懒加载)
- 普通人如何申请阿里云账号(怎么注册阿里云账号 阿里云帐号怎么申请)
- js回调函数
- dedecms文章标题(dedecms5.7后台发布文章提示“标题不能为空”的解决方法)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9