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教程:新增加的结构伪类
Apr 02 HTML / CSS
css3实现背景颜色渐变让图片不再是唯一的实现方式
Dec 18 HTML / CSS
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
May 09 HTML / CSS
CSS3 box-shadow属性实例详解
Jun 19 HTML / CSS
移动端html5 meta标签的神奇功效
Jan 06 HTML / CSS
HTML5中的音频和视频媒体播放元素小结
Jan 29 HTML / CSS
使用HTML5进行SVG矢量图形绘制的入门教程
Feb 19 HTML / CSS
canvas与html5实现视频截图功能示例
Dec 15 HTML / CSS
html5页面结构_动力节点Java学院整理
Jul 10 HTML / CSS
怎样实现H5+CSS3手指滑动切换图片的示例代码
May 05 HTML / CSS
使用html5 canvas绘制圆环动效
Jun 03 HTML / CSS
table不让td文字溢出操作方法
Dec 24 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
PHP IN_ARRAY 函数使用注意事项
2010/07/24 PHP
php分页函数示例代码分享
2014/02/24 PHP
php使用Session和文件统计在线人数
2015/07/04 PHP
php简单防盗链实现方法
2015/07/29 PHP
jquery tools 系列 scrollable学习
2009/09/06 Javascript
LABjs、RequireJS、SeaJS的区别
2014/03/04 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
2015/09/15 Javascript
JavaScript中文件上传API详解
2016/04/01 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
JavaScript操作表单实例讲解(上)
2016/06/20 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
2016/08/25 Javascript
基于JavaScript实现数码时钟效果
2020/03/30 Javascript
基于JavaScript实现淘宝商品广告效果
2017/08/10 Javascript
node.js-v6新版安装具体步骤(分享)
2017/09/06 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
2017/10/11 Javascript
JS实现的集合去重,交集,并集,差集功能示例
2018/03/13 Javascript
微信小程序表单验证form提交错误提示效果
2020/06/19 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
2019/11/25 Javascript
小程序实现简单语音聊天的示例代码
2020/07/24 Javascript
[01:38]完美世界高校联赛决赛花絮
2018/12/02 DOTA
Python实现比较两个列表(list)范围
2015/06/12 Python
Python中标准模块importlib详解
2017/04/16 Python
Python 新建文件夹与复制文件夹内所有内容的方法
2018/10/27 Python
python实现银联支付和支付宝支付接入
2019/05/07 Python
Django静态资源部署404问题解决方案
2020/05/11 Python
详解html5 shiv.js和respond.min.js
2018/01/24 HTML / CSS
GWebs公司笔试题
2012/05/04 面试题
小学新学期教师寄语
2014/01/18 职场文书
2014年元旦联欢会活动策划方案
2014/02/16 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
企业法人授权委托书范本
2014/09/23 职场文书
教师个人自我剖析材料
2014/09/29 职场文书
认错检讨书
2014/10/02 职场文书
2015年医院创卫工作总结
2015/04/22 职场文书
企业工会工作总结2015
2015/05/13 职场文书
2015年小班保育员工作总结
2015/05/27 职场文书