javascript - 如何使我的 HTML5 画布的像素化程度更低，或者抗锯齿程度更高？

Question

下面的弧线是在 HTML5 画布中绘制的。如何使圆弧的外部更平滑，像素化更少，或者更抗锯齿？

这是用于创建上述圆弧的代码

  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var img = new Image();var x = canvas.width / 2;
  var y = canvas.height / 2;
  var radius = 100;
  var startAngle =   Math.PI;
  var endAngle =2* Math.PI;
  var counterClockwise = false;
  var outX= x
  var outY= y  
  var vari1 =.1;
  var endAngle = startAngle+ vari1* Math.PI;
  context.beginPath();
  context.arc(outX , outY, radius, startAngle, endAngle, counterClockwise);
  context.lineWidth = 25; 
  context.strokeStyle = '#FA603D';  
  context.stroke();
  context.closePath();

Answer 1

我认为你不能不使用视网膜显示器（不要试图讽刺）。

您可以通过减少弧线和背景之间的对比度来产生更平滑的错觉。

如果您绘制的是线条而不是弧线，则可以在 Chrome 中关闭抗锯齿功能以使线条更清晰。