如何使我的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中关闭消除锯齿以使线条更清晰。