当前位置:Web前端 > > 正文

canvas绘图白屏或者元素有缺失(高清屏中使用Canvas绘图出现模糊的问题及解决方法)

时间:2021-10-03 01:57:43类别:Web前端

canvas绘图白屏或者元素有缺失

高清屏中使用Canvas绘图出现模糊的问题及解决方法

高清屏出现以前,屏幕的一个物理像素就是css所定义的一个逻辑像素(估计那个时候还没有物理像素和逻辑像素的概念)。因此使用下面代码就可以在浏览器中展示一个600x386的Canvas。

  • <html>  
      <head>
        <title>Canvas demo</title>
        <style>
          * {
            padding: 0;
            margin: 0;
          }
          html, body {
            width: 100%;
          }
          #canvas {
            display: block;
            border: 1px solid red;
            margin: 10px auto 0;
          }
        </style>
      </head>
      <body>
        <canvas id="canvas" width="600" height="386">Canvas is not supported</canvas>
        <script>
          var canvas = document.getElementById('canvas');
          var ctx = canvas.getContext('2d');
          ctx.beginPath();
          ctx.arc(300, 150, 20, 0, Math.PI*2);
          ctx.fillStyle = "#0095DD";
          ctx.fill();
          ctx.closePath();
        </script>
      </body>
    </html> 
    
  • canvas绘图白屏或者元素有缺失(高清屏中使用Canvas绘图出现模糊的问题及解决方法) 

    总结

    以上所述是小编给大家介绍的高清屏中使用Canvas绘图出现模糊的问题及解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对开心学习网网站的支持!

    上一篇下一篇

    猜您喜欢

    热门推荐