canvas教程

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

字号+ 作者:H5之家 来源:H5之家 2017-10-25 15:20 我要评论( )

写canvas时发现,绘制出来的东西在移动端上测试时发现文字锯齿和模糊现象严重。 出现这个问题应该是因为canvas的尺寸小于手机的宽度,所以显示时,canvas中的内

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>

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 这个页面利用xml嵌入到canvas的是什么技术?

    这个页面利用xml嵌入到canvas的是什么技术?

    2017-10-25 12:24

  • 基于Canvas的热力图绘制方法

    基于Canvas的热力图绘制方法

    2017-10-25 12:00

  • HTML5 学习笔记(四)canvas绘图、WebGL、SVG

    HTML5 学习笔记(四)canvas绘图、WebGL、SVG

    2017-10-25 11:21

  • H5学习之5 canvas的运用

    H5学习之5 canvas的运用

    2017-10-25 08:27

网友点评
i