javascript - 如何用圆弧平滑在 Canvas 中绘制的圆的边缘？

Question

我正在使用 arc 在 html5 Canvas 中绘制圆圈，但边缘粗糙且不光滑。我想把它们弄平。 Stacked overflow 需要我写更多，所以我的代码与文本的比例更好

代码

(function() {
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||   window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
}());

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

createCircle(100, 150, '85', '675');
createCircle(300, 150, '70', '479');
createCircle(500, 150, '91', '715');
createCircle(700, 150, '58', '334');


function createCircle(x, y, temp, hash, callback) {
  var radius = 75;
  var endPercent = parseInt(temp, 10);
  var curPerc = 0;
  var counterClockwise = false;
  var circ = Math.PI * 2;
  var quart = Math.PI / 2;

  context.strokeStyle ='#006600';
  context.lineWidth = 10;
  context.lineCap = "round";
  var offset = quart;

function doText(context, x, y, temp, hash) {
    context.lineWidth = 10;  
    if(parseInt(temp, 10) > 90)
        context.fillStyle = '#ad2323';
    else if(parseInt(temp, 10) > 82)
        context.fillStyle = '#ffcc33';
    else
        context.fillStyle = '#006600';

    context.font = "28px sans-serif";
    context.fillText(temp + 'º', x - 20, y + 10);
    context.fillText(hash + 'KH/s', x - 50, y - 90);
}

function animate(current) {
    context.lineWidth = 10;
    if(curPerc > 89)
        context.strokeStyle = '#ad2323';
    else if(curPerc > 81)
        context.strokeStyle = '#ffcc33';

    context.beginPath();
    context.arc(x, y, radius, offset, ((circ) * current) + offset , false);
    context.stroke();
    context.closePath();      
    curPerc++;
    if (curPerc < endPercent) {
       requestAnimationFrame(function () {
            animate(curPerc / 100);
        });
    } 
    else {
        doText(context, x, y, temp, hash);
        if (callback) callback.call();
    }
 }
 animate();
}

JSFiddle = http://jsfiddle.net/uhVj6/712/

Answer 1

您多次绘制笔划，因此它们相互重叠。您需要清除旧圆弧笔划所在的区域，然后绘制新的圆弧笔划

context.clearRect(x - radius - context.lineWidth, 
                  y - radius - context.lineWidth, 
                  radius * 2 + (context.lineWidth*2), 
                  radius * 2 + (context.lineWidth*2));
context.beginPath();
context.arc(x, y, radius, offset, ((circ) * current) + offset , false);
context.stroke();
context.closePath();

JSFiddle