javascript - 如何创建一个使用 JavaScript Canvas 旋转的通用函数？

Question

我正在构建一些 JavaScript 组件来处理通用 Canvas 绘图，但我在旋转工作方面遇到了困难。我有一个与此类似的函数(这个函数被简化了很多)。

function drawThing (ctx, posX, posY, sizeX, sizeY, rotation, drawFn) {
    // `ctx` is the 2d canvas context
    ctx.save();
    ctx.beginPath(); // Not sure if this is needed
    ctx.translate(posX, posY); // What do I use here?
    ctx.rotate(rotation); // rotation is in radians
    drawFn(ctx, posX, posY, sizeX, sizeY);
    ctx.restore();
}
function exampleDrawFn (ctx, posX, posY, sizeX, sizeY) {
    ctx.fillStyle = "#333";
    ctx.fillRect((posX - sizeX/2), (posY - sizeY/2), sizeX, sizeY);
}

我不知道翻译参数要使用什么；或者也许某个地方有不同的错误。

(虽然有点复杂，但这是我实际正在处理的代码:https://github.com/rocket-boots/rocket-boots/blob/master/scripts/rocketboots/Stage.js#L423)

Answer 1

当前绘制图像最快的方法。

function drawImage (image, x, y, sizeX, sizeY, rot) {
    var xdx = Math.cos(rot);  // direction of x axis
    var xdy = Math.sin(rot);
    ctx.setTransform(
        xdx, xdy,  // set the direction of the x axis
        -xdy, xdx, // set the direction of the y axis (at 90 deg clockwise from x axis
        x, y       // set the origin the point around which to rotate
    );
    ctx.drawImage(image,- sizeX / 2, -sizeY / 2, sizeX, sizeY);
}

假设您希望图像围绕其中心(即 x,y 点)旋转，渲染图像完成后，您可以使用 ctx.setTransform(1,0,0,1,0,0); 重置为默认变换。

这只是比...更快

function drawImage(image, x, y, sizeX, sizeY, rot){
    ctx.setTransform(1, 0, 0, 1, x, y);
    ctx.rotate(rot);
    ctx.drawImage(image, -sizeX / 2, -sizeY / 2, sizeX, sizeY);
}

...在 FF 和 Chrome 上，但明天可能就不是这样了。