javascript - 我怎样才能让我的 HTML5 canvas 更少像素化，或者更多抗锯齿？

Question

下面的圆弧是在 HTML5 canvas 中绘制的。我怎样才能使圆弧的外部更平滑、像素化更少，或者更抗锯齿？

这是用来创建上面弧线的代码

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();

<canvas id="myCanvas"></canvas>

Answer 1

我认为您不能不使用视网膜显示器(不是想讽刺)。

您可以通过降低弧线和背景之间的对比度来营造更平滑的错觉。

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