javascript - 允许QuadraticCurveTo()在填充时更平滑吗？

我在这里发布消息是因为我尚未找到解决问题的解决方案。我找到了一种使用抗锯齿的方法，但是这对我来说并不好，因为我单击鼠标后，翻译将每次单击后重写并移动图像0.5。

无论如何要解决这个问题。我的画布元素上有一个二次曲线，但是当它填充时，您会看到形状不清晰并且看起来像像素化。有没有办法改善形状的平滑度？

var c = document.getElementsByClassName("myCanvas");

  for (var i = 0; i < c.length; i++) {
    var canvas = c[i];
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
          ctx.moveTo( ( 150 - ( 300 / 2 ) ) , 80 );
          ctx.quadraticCurveTo( 150 , 70, 150 + ( 300 / 2 ), 80);
          ctx.lineTo( 150 + ( 300 / 2 ), 83 );
          ctx.quadraticCurveTo( 150 , 73, 150 - ( 300 / 2 ), 83);
        ctx.closePath();
        ctx.fill();
  }

<canvas class="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
<canvas class="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
<canvas class="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>

最佳答案

如果您的设计允许，请在路径上添加一个半像素的笔触：

var c = document.getElementsByClassName("myCanvas");

  for (var i = 0; i < c.length; i++) {
    var canvas = c[i];
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
          ctx.moveTo( ( 150 - ( 300 / 2 ) ) , 80 );
          ctx.quadraticCurveTo( 150 , 70, 150 + ( 300 / 2 ), 80);
          ctx.lineTo( 150 + ( 300 / 2 ), 83 );
          ctx.quadraticCurveTo( 150 , 73, 150 - ( 300 / 2 ), 83);
        ctx.closePath();
        ctx.fill();
        ctx.lineWidth=0.50;
        ctx.stroke();
  }

<canvas class="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
<canvas class="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
<canvas class="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>

关于javascript - 允许QuadraticCurveTo()在填充时更平滑吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37311867/