canvas繪圖出現模糊，解決方法

時間 2019-12-08

標籤 canvas 繪圖出現模糊解決方法简体版

原文原文鏈接

在項目開發中發現，canvas有一個問題，繪製的圖會出現模糊現象。html

解決方法之一：將canvas元素放大2倍，而後將整個canvas元素或者其父元素縮小兩倍。canvas

<!DOCTYPE html>
<html>

<body>
  <canvas id="myCanvas" width="400" height="300" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.
  </canvas>
  
  <script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.fillStyle = "yellow";
    ctx.arc(200, 150, 100, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.fill();
  </script>

</body>

</html>

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      zoom: 0.5;
    }
  </style>
</head>

<body>
  <div class="box">
    <canvas id="myCanvas" width="800" height="600" style="border:1px solid #d3d3d3;">
      Your browser does not support the HTML5 canvas tag.
    </canvas>

  </div>
  <script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.scale(2, 2); // 放大2倍
    ctx.beginPath();
    ctx.fillStyle = "yellow";
    ctx.arc(200, 150, 100, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.fill();

  </script>

</body>

</html>

相關標籤/搜索