Question

所以我试图在一个站点的透明背景上制作一个旋转弧。大部分都有效，除了某些原因我的弧绘制函数的每次迭代都会绘制每个前一个弧。

以下是代码，请小心点击该链接，因为如果您长时间停留在页面上，这可能会锁定您的浏览器（仅在Firefox中确认这样做）。

这是JavaScript：

       function MovingArc(cx, cy, radius, size, angle){
    this.centerX = cx;
    this.centerY = cy;
    this.radius = radius; //thickness
    this.size = size; //width
    this.angle = angle;

    this.startAngle = 0;
    this.endAngle = 0;

    this.checkClockwise = function(){
        var num = Math.round(Math.random());
        return (num == 1);
    }

    this.clockwise = this.checkClockwise();
    this.update = function(){
        if(this.clockwise) this.angle += 2;
        else this.angle -= 2;

        this.startAngle = this.angle - (this.size/2);
        this.endAngle = this.angle + (this.size/2);
    }
}

var myArc;

function init() {
    myArc = new MovingArc(50,50, 50,50, 60);

    update();
    setInterval(update, 1000 / 60);
}

function drawCanvas(){
    var ctx = $('#canvasbanner')[0].getContext("2d"); //get context of canvas
    ctx.clearRect(0,0,400,400);

    ctx.fillStyle = "#000000";;
    ctx.arc(myArc.centerX,myArc.centerY,myArc.radius,myArc.startAngle,myArc.endAngle,false);
    ctx.stroke();
}

function update(){
    myArc.update();
    drawCanvas();
}

$(document).ready(function() {
    console.log("doc ready");
    init();
});

Answer 1

arc命令采用弧度来开始和结束角度，看起来你正在发送度角。

确保使用ctx.beginPath（），否则每次迭代都会重绘每个先前绘制的弧。

function drawCanvas(){
    var ctx = $('#canvasbanner')[0].getContext("2d"); //get context of canvas
    ctx.clearRect(0,0,400,400);

    ctx.beginPath();
    ctx.fillStyle = "#000000";;
    ctx.arc(myArc.centerX,myArc.centerY,myArc.radius,myArc.startAngle,myArc.endAngle,false);
    ctx.stroke();
}

画布弧不清除

1 个答案: