admin 管理员组

文章数量: 1184232

移动端canvas出现锯齿和文字模糊问题


       最近在做一个转盘抽奖页面, 然后转盘是使用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内容被缩小了之后肯定不会产生锯齿现象, 所以这个解决方案也是可以的.

本文标签： 移动端canvas出现锯齿和文字模糊问题

版权声明：本文标题：移动端canvas出现锯齿和文字模糊问题 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.roclinux.cn/p/1698026169a283308.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。