如何消除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倍，再插值縮小