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

Question

想利用Canvas绘制一个扇形的动画，红色的背景图上需要一个黑色的扇形。最终画面如下：主要绘制代码如下：// Objectsfunction 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倍，再插值縮小