Question

当我运行此代码时，它会产生从0度到180度“旋转”的行，问题是上一行没有被清除（因此ctx.clearRect（0,0,400,200）不起作用。在控制台日志中它显示为正在运行（当我尝试调试时）但它实际上并没有清除它。有没有人知道如何解决这个问题？

var canvas = document.getElementById("radarImage");
var ctx = canvas.getContext("2d");

var angle = 0
function incrementAngle(){

    angle++;
    if(angle>180){
        angle=0;

        }


}

function rotateRadar(){

    incrementAngle();
    ctx.clearRect(0,0,400,200);
    ctx.save();
    ctx..translate(-200,-200);
    ctx.rotate((Math.PI/180)*angle);
    ctx.translate(-200,-200);
    ctx.moveTo(200,200);
    ctx.lineTo(0,200);
    ctx.stroke();
    ctx.restore;
}
setInterval(rotateRadar,200);

Answer 1

编辑：您应该使用请求动画框架不断调用您的更新：http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

如果您愿意使用库来处理canvas，那么可能有一种可能性：http://www.createjs.com/easeljs

另一位SO用户向Easel Js提出了类似的问题，并且有一些可能与您相关的好答案：EaselJS - Rotate a shape around its center

Answer 2

只是你不能在画布上旋转一条线，你必须阅读sin，cos以在画布中旋转一条线。希望这可以帮到你。JsFiddle

    context.clearRect(0,0,400,200);
    context.beginPath();
    context.moveTo(x,y);
    x1=Math.cos(startAngle)*radius+10;
    y1=Math.sin(startAngle)*radius+10;
    console.log(x1,y1);
    context.lineTo(x1,y1);
    context.stroke();

使用javascript

2 个答案: