移动端canvas出现锯齿和文字模糊问题
来源:互联网 发布:程控裁纸机 编程 编辑:程序博客网 时间:2024/04/29 14:13
最近在做一个转盘抽奖页面, 然后转盘是使用HTML5的canvas元素画出来的. 然而在几个手机上测试都发现转盘有一点锯齿问题, 而且文字都比较模糊. 除了在上面的canvas标签中设置了width="422px",height="422px"之外, 还在外部链接的CSS样式表中设置了该canvas的宽度为100%, 公司的"导师"告诉我, 这个应该是手机的宽是720像素的, 而这个canvas是按照422像素画出来的, 所以在720像素的手机上显示时, 这个canvas的内容其实是经过拉伸的, 所以会出现模糊和锯齿. 解决方案就是把canvas的行间样式的宽度设为手机端的最大像素值, 因为现在的手机端宽度的最大的只有1080像素宽, 所以我就把canvas的宽度设为422的4倍也就是1688像素, 按照这个像素画完之后, width:100%又会把canvas的宽度缩小至父元素的宽度那么大, 因此整个canvas的宽度被缩小了, 大尺寸的canvas内容被缩小了之后肯定不会产生锯齿现象, 所以这个解决方案也是可以的.
0 0
- 移动端canvas出现锯齿和文字模糊问题
- Canvas文字防锯齿
- iOS开发-缩小图片模糊或出现锯齿的问题
- canvas 绘图出现模糊问题的解决方法
- canvas绘制出现模糊的问题
- 优化transform在过渡效果中出现文字模糊和抖动问题
- 自定义控件工作的时候会影响标题textview的文字出现锯齿显得很模糊问题解决方案
- 为什么canvas绘制的线条会模糊、有锯齿?
- canvas画图模糊问题
- 安卓canvas绘图,锯齿问题
- 图片放大出现锯齿问题
- canvas绘制图像或者文字时模糊
- 关于网页中的文字抗锯齿问题
- 安卓微信浏览器加border-radius出现模糊(锯齿)
- 移动端图片模糊问题的解决办法
- JFreeChart中文乱码和文字模糊问题的通用解决方案
- JFreeChart中文乱码和文字模糊问题的通用解决方案
- Windows GDI图形接口的严重问题:效率低下造成图形横向移动时出现阶梯状锯齿
- 传智播客荣获 “2016腾讯网教育年度盛典” 公信力教育品牌
- iOS 硬件授权检测:定位服务、通讯录、日历、提醒事项、照片、蓝牙共享、麦克风、相机等
- A表字段更新为B表的字段值
- 从ISE 无法启动modelsim
- Maven的pom.xml介绍
- 移动端canvas出现锯齿和文字模糊问题
- 精通 CSS+DIV 网页样式与布局 66
- Joint Patch and Multi-label Learning for Facial Action Unit Detection
- qt mac环境搭建
- GO声明和作用域
- RabbitMQ的安装和配置化可视界面
- 精通 CSS+DIV 网页样式与布局 67
- java判断字符串是否为空(null)
- 【腾讯Bugly干货分享】美团大众点评 Hybrid 化建设