javascript – 如何让我的HTML5画布更少像素化,或更多抗锯齿？

2023年8月11日 209次阅读

以下弧在
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();

最佳答案 我认为你不能使用视网膜显示器(不要试图讽刺).

通过减少弧和背景之间的对比度,可以给出更平滑的幻觉.

如果您是绘制线条而不是弧形,则可以在Chrome中关闭消除锯齿以使线条更清晰.

点赞