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中Color的一些特性介绍
May 27 HTML / CSS
一款利用html5和css3实现的3D滚动特效的教程
Jan 04 HTML / CSS
使用html2canvas将页面转成图并使用用canvas2image下载
Apr 04 HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
Jun 09 HTML / CSS
html标签之Object和EMBED标签详解
Jul 04 HTML / CSS
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
Jan 01 HTML / CSS
有关HTML5页面在iPhoneX适配问题
Nov 13 HTML / CSS
详解HTML5 data-* 自定义属性
Jan 24 HTML / CSS
详解Html5项目适配系统深色模式方案总结
Apr 14 HTML / CSS
css实现文章分割线样式的多种方法总结
Apr 21 HTML / CSS
position:sticky 粘性定位的几种巧妙应用详解
Apr 24 HTML / CSS
浅析CSS在DevTools 中架构演变
Oct 05 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
收音机另类DIY - 纸巾盒做外壳
2021/03/02 无线电
浅析PHP程序设计中的MVC编程思想
2014/07/28 PHP
thinkphp项目如何自定义微信分享描述内容
2017/02/20 PHP
解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题
2017/05/11 PHP
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
2010/08/13 Javascript
JS和Jquery获取和修改label的值的示例代码
2014/01/15 Javascript
javascript:void(0)点击登录没反应怎么解决
2015/11/13 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
2016/12/08 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
2017/02/18 Javascript
用原生JS实现简单的多选框功能
2017/06/12 Javascript
Vue中父组件向子组件通信的方法
2017/07/11 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
2019/03/26 Javascript
vue使用websocket的方法实例分析
2019/06/22 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
2019/09/12 Javascript
微信小程序 导入图标实现过程详解
2019/10/11 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
2020/11/05 Javascript
Vue仿百度搜索功能
2020/12/28 Vue.js
利用Python中的mock库对Python代码进行模拟测试
2015/04/16 Python
Python算法应用实战之队列详解
2017/02/04 Python
PyQt5每天必学之事件与信号
2018/04/20 Python
Python多线程爬取豆瓣影评API接口
2019/10/22 Python
python3.8 微信发送服务器监控报警消息代码实现
2019/11/05 Python
Python Django中间件,中间件函数,全局异常处理操作示例
2019/11/08 Python
python实现四人制扑克牌游戏
2020/04/22 Python
html5 application cache遇到的严重问题
2012/12/26 HTML / CSS
Waterford美国官网:爱尔兰水晶制品品牌
2017/04/26 全球购物
维多利亚的秘密官方网站:Victoria’s Secret
2018/10/24 全球购物
优秀毕业生自我鉴定
2014/02/11 职场文书
篮球比赛口号
2014/06/10 职场文书
大四优秀党员个人民主评议
2014/09/19 职场文书
小学生校园广播稿
2014/09/28 职场文书
单位个人查摆问题及整改措施
2014/10/28 职场文书
医院感染管理制度
2015/08/05 职场文书
共青团优秀团员申请书(范文)
2019/08/15 职场文书
2019年第四季度财务部门工作计划
2019/11/02 职场文书
SQL Server数据定义——模式与基本表操作
2021/04/05 SQL Server