zoukankan      html  css  js  c++  java
  • canvas图像模糊以及图像变形问题

    问题:有时用canvas作图时发现图像会出现模糊不清晰的问题,甚至做出来的图呈现出的效果与我们给的数值所应该呈现出的效果不一致

    原因:当你在支持html5 canvas的浏览器下查看页面的时候,canvas画布的默认大小是300*150,相当于一张图片,当在css设置画布大小时比如350*350实际是将原画布(300*150)进行了拉伸,所以会导致图像变形,至于模糊的问题与浏览器处理 canvas 的方式有关

    图像变形解决方法:将想要设置的画布大小直接设置在canvas标签上

              <canvas  id="mycanvas" width="350px" height="350px"></canvas>

    图像模糊的解决方法:将canvas的绘制过程放大两倍(也可以根据自己需求放大其他倍数,我在项目中放大了四倍才感觉舒服些,根据项目需求),然后将canvas的父元素缩小两倍(根据绘制过程中放大的倍数确定了,当打几倍父元素就缩小几倍)就可以解决canvas图像模糊问题,

      .box{zoom:0.5;}

      <div class="box">
        <canvas id="mycanvas" width="700px" height="700px"></canvas>
      </div>

    因为canvas放大了两倍,所以绘制时,参数都要放大两倍(比如半径),这样就完美的解决了canvas图像模糊的问题

  • 相关阅读:
    Cronolog切割tomcat日志
    使用TortoiseGit+码云管理项目代码
    POI使用 (4.0) 常用改动
    MySQL-with rollup函数运用
    CentOS7使用yum安装MySQL8.0
    java 8 新特性之Stream的排序/分类
    java阳历转农历
    MyBatis SQL xml处理小于号与大于号
    mysql update不能直接使用select的结果
    Java面试中遇到的坑【填坑篇】
  • 原文地址:https://www.cnblogs.com/yunyea/p/7754519.html
Copyright © 2011-2022 走看看