允许QuadraticCurveTo（）在填充时更流畅吗？

Question

我在这里发帖是因为我还没有找到解决方案来解决我的情况。我找到了一个使用抗锯齿的方法然而这对我来说并不好，因为我在点击翻译时重写并在每次点击时将图像移动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>

Answer 1

如果您的设计允许，请在路径中添加半像素笔划：

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>