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


想利用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);
    }
}

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

canvas JavaScript

会飞的茶几 11 years, 3 months ago

繪製4倍,再插值縮小

JackAyu answered 11 years, 3 months ago

Your Answer