如何消除Canvas绘制弧线产生的锯齿

Question

想利用Canvas绘制一个扇形的动画，红色的背景图上需要一个黑色的扇形。

最终画面如下：

主要绘制代码如下：

// Objects
function Circle(canvasID, startAngle, endAngle) {
    this.canvas = document.getElementById(canvasID);
    this.startAngle = startAngle? startAngle: 0;
    this.endAngle = endAngle? endAngle: 0;
    this.isAniStart = false;
    this.startTime = 0;
    this.endTime = 0;
    this.durationTime = 600;

    this.toRadians = function(deg) {
    return (deg * Math.PI / 180) - Math.PI/2;
    }
    this.drawCircle = function(radius) {
        var context = this.canvas.getContext('2d');
        var centerX = this.canvas.width / 2;
        var centerY = this.canvas.height / 2;
        var radius = radius? radius: 0;

        this.clearCircle();
        context.beginPath();
        context.moveTo(centerX, centerY);
        context.arc(centerX, centerY, radius, this.toRadians(this.startAngle), this.toRadians(this.endAngle));
        context.fillStyle = '#000';
        context.lineWidth = 0;
        context.strokeStyle = '#000';
        context.fill();
    }
    this.clearCircle = function() {
        var context = this.canvas.getContext('2d');
        context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

仔细看的话，圆的边缘是有锯齿的，我想问下大家如何消除这种锯齿。

Answer 1

繪製4倍，再插值縮小

Answer 2

能否看下绘制的动画部分？