canvas画图被放大且模糊的解决方法


Posted in HTML / CSS onAugust 11, 2020

先来理解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图被放大且模糊内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木! 

HTML / CSS 相关文章推荐
CSS3提交意见输入框样式代码
Oct 30 HTML / CSS
CSS3中颜色线性渐变实战
Jul 18 HTML / CSS
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
Dec 06 HTML / CSS
利用CSS3实现进度条的两种姿势详解
Mar 21 HTML / CSS
CSS3 毛玻璃效果
Aug 14 HTML / CSS
基于 HTML5 WebGL 实现的垃圾分类系统
Oct 08 HTML / CSS
html+css实现自定义图片上传按钮功能
Sep 04 HTML / CSS
HTML5 预加载让页面得以快速呈现
Aug 13 HTML / CSS
HTML5 Canvas中绘制矩形实例
Jan 01 HTML / CSS
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
Feb 28 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
Jul 13 HTML / CSS
详解Canvas实用库Fabric.js使用手册
Jan 07 HTML / CSS
在html页面中取得session中的值的方法
Aug 11 #HTML / CSS
canvas实现滑动验证的实现示例
Aug 11 #HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
Aug 10 #HTML / CSS
Html5 webview元素定位工具的实现
Aug 07 #HTML / CSS
HTML5 video循环播放多个视频的方法步骤
Aug 06 #HTML / CSS
html5 video全屏播放/自动播放的实现示例
Aug 06 #HTML / CSS
HTML5 通过Vedio标签实现视频循环播放的示例代码
Aug 05 #HTML / CSS
You might like
Javascript Global对象
2009/08/13 Javascript
jQueryUI如何自定义组件实现代码
2010/11/14 Javascript
js控制分页打印、打印分页示例
2014/02/08 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
2015/08/28 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
2015/12/14 Javascript
Javascript基础知识盲点总结之函数
2016/05/15 Javascript
Knockoutjs 学习系列(一)ko初体验
2016/06/07 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
2016/11/21 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
2017/04/24 Javascript
jQuery实现form表单序列化转换为json对象功能示例
2018/05/23 jQuery
Vue+Mock.js模拟登录和表格的增删改查功能
2018/07/26 Javascript
vue 地图可视化 maptalks 篇实例代码详解
2019/05/21 Javascript
Js图片点击切换轮播实现代码
2020/07/27 Javascript
[01:14]DOTA2亚洲邀请赛小组赛赛前花絮
2017/03/27 DOTA
Python列表append和+的区别浅析
2015/02/02 Python
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
python sys.argv[]用法实例详解
2018/05/25 Python
为什么Python中没有&quot;a++&quot;这种写法
2018/11/27 Python
pygame编写音乐播放器的实现代码示例
2019/11/19 Python
关于Numpy数据类型对象(dtype)使用详解
2019/11/27 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
使用canvas绘制贝塞尔曲线
2014/12/17 HTML / CSS
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
2017/07/31 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
2020/03/04 HTML / CSS
瀑布模型都有哪些优缺点
2014/06/23 面试题
生产总经理岗位职责
2013/12/19 职场文书
感恩寄语大全
2014/04/11 职场文书
产品推广策划方案
2014/05/10 职场文书
开服装店计划书
2014/08/15 职场文书
小学元宵节活动总结
2015/02/06 职场文书
感恩母亲节活动总结
2015/02/10 职场文书
背起爸爸上学观后感
2015/06/08 职场文书
2016年暑假家长对孩子评语
2015/12/01 职场文书
校运会班级霸气口号
2015/12/24 职场文书
素质教育学习心得体会
2016/01/19 职场文书
JS实现简单控制视频播放倍速的实例代码
2021/04/18 Javascript