怎样才能让我的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中关闭抗锯齿功能以使线条更清晰。