Question

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

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/

Answer 1

旋转始终发生在上下文的原点上。

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

所以你需要做一些事情：

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/

顺便说一下，你需要再抽出一个齿轮齿，这在我将齿轮齿变为半透明（仅用于测试目的）时很明显。

旋转画布的一部分

1 个答案: