Question

我使用以下代码制作了一个HTML Canvas。但有些线条是像素化的（见图）。

我几乎尝试了在论坛中找到的所有解决方案，但没有任何方法可以帮助我。

任何人都可以帮助我吗？感谢

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <canvas id="main_canvas" width="1000px" height="1500px" style="background-color: grey;">Canvas is not available</canvas>
    <script>
      var canvas = document.getElementById("main_canvas");
      var canvasContext = canvas.getContext("2d");
      var listCount = 0;
      var list = [
        [0, 305, 580, 325, 0.5],
        [0, 430, 150, 390, 0.5],
        [150, 390, 410, 90, 0.5],
        [410, 90, 580, 325, 0.5],
        [580, 325, 610, 610, 0.5],
        [150, 390, 610, 610, 0.5],
        [150, 390, 588.49, 405.65, 0.5],
        [297.73, 315.27, 400, 380, 0.5]
      ]
      var interval = setInterval(drawLine, 100);
      function drawLine() {
        if (listCount < list.length) {
          var element = list[listCount];
          canvasContext.beginPath();
          canvasContext.lineWidth = element[4];
          canvasContext.moveTo(element[1] + 0.1, element[0] + 0.1);
          canvasContext.lineTo(element[3] + 0.1, element[2] + 0.1);
          console.log("New Line: " + element[1] + " " + element[0] + " - " + element[3] + " " + element[2]);
          canvasContext.closePath();
          canvasContext.stroke();
          listCount++;
        } else {
          clearInterval(interval);
        }
      }
    </script>
  </body>
</html>

＆＃13;

像素化线（HTML画布）

0 个答案: