javascript - 如何消除Canvas绘制弧线产生的锯齿
迷茫
迷茫 2017-04-10 14:22:24
[JavaScript讨论组]

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

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

迷茫
迷茫

业精于勤,荒于嬉;行成于思,毁于随。

全部回复(2)
怪我咯

繪製4倍,再插值縮小

PHP中文网

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号