1

我使用画布创建了一个类似齿轮的对象，现在我希望它旋转。话虽如此，我试图实现这一点，但发生的是整个画布正在旋转，这不是我想要的。这是我的代码：

var ctx = document.getElementById("canvas").getContext("2d"),
    i = 0;

function init(){
    drawGear();
    setInterval(drawGear,1000);
}

var i = 0;

function drawGear(){
    ctx.clearRect(0,0,200,200);
    ctx.beginPath();
    ctx.fillStyle = "#000";
    ctx.translate(100,100);
    ctx.arc(0,0,20,0,Math.PI*2);
    ctx.fill();
    ctx.closePath();

    ctx.beginPath();    
    ctx.fillStyle = "#FFF";
    ctx.arc(0,0,10,0,Math.PI*2);
    ctx.fill();
    ctx.closePath();

    for(var i=0; i<9; i++){
        drawTooth(-8,-18);
        ctx.rotate(45*Math.PI/180);
    }

    ctx.rotate(i*Math.PI/180);
    i++;
}

function drawTooth(startX,startY){
    ctx.fillStyle = "#000";
    ctx.beginPath();
    ctx.moveTo(startX,startY);
    ctx.lineTo(startX+5,startY-10);
    ctx.lineTo(startX+10,startY-10);
    ctx.lineTo(startX+15,startY);
    ctx.closePath();
    ctx.fill();
}

init();

http://jsfiddle.net/MsjyN/

4

1 回答 1

2

旋转总是发生在上下文的原点上。

您需要翻译上下文（将原点更改为要旋转的中心），旋转对象，然后再翻译回来。

因此，您需要执行以下操作：

function drawGear(){
    ...
    ctx.translate(100,100);
    ...

    for(var i=0; i<8; i++){
        drawTooth(-8,-18);
        ctx.rotate(45*Math.PI/180);
    }

    ctx.rotate(i*Math.PI/180);
    ctx.translate(-100,-100);    
    i++;
}

见这里：http: //jsfiddle.net/MsjyN/1/

顺便说一句，你画的齿轮齿比必要的多，当我将齿轮齿改为半透明时，这一点很明显（仅用于测试目的）

于 2013-09-16T04:06:45.153 回答