canvas移动端文字出现锯齿模糊
写canvas时发现，绘制出来的东西在移动端上测试时发现文字锯齿和模糊现象严重。
出现这个问题应该是因为canvas的尺寸小于手机的宽度，所以显示时，canvas中的内容经过了拉伸，导致出现模糊和锯齿。
解决方法设置canvas的宽度使之大于手机的宽度，再利用css将canvas的大小限定在展示区域父元素中，这样会将元素绘制在大尺寸的canvas中，而显示又是缩小后的，文字锯齿和模糊能得到解决。不过要注意这种解决办法只针对移动端，会导致PC文字锯齿严重，如果页面PC端和移动端同时要使用，就将PC端不处理。
设置示例：
// 设置样式 <style type="text/css"> .canvas-wrap { width: 200px; height: 200px; } #canvas { width: 100%; } </style> // HTML => // 使用js设置canvas宽高 <script type="text/javascript"> var canvas = document.getElementById('canvas'); canvas.width = canvas.height = 1000; </script>
相关文章
精彩导读
热门资讯
关注我们
