javascript - 在 HTML Canvas 中单独旋转平铺图像

Question

我的游戏中有一些代码可以在 Canvas 中旋转图标，如下所示:

if (rotate > 0) {
    context.translate(canvasWidth / 2, canvasHeight / 2);
    context.rotate(rotate);
    context.translate(-canvasWidth / 2, -canvasHeight / 2);
}

没有什么是你以前没见过的。我还添加了一个在更大的 Canvas 中平铺图标的功能，如下所示:

var x = 0;
var y = 0;

for (var i = 0; i < totalUnits; i++) {
    context.drawImage(img, x, y);

    if (i != 0 && (i + 1) % level == 0) {
        x = 0;
        y += 72;
    }

    else {
        x += 72;
    }
}

请注意，变量 level 可以是任何整数，而 totalUnits 如果大于 1，则为它的平方，例如，如果我指定 level code> as 2，然后在我的 Canvas 上绘制 4 个图像，2 个横向，2 个向下。另请注意，我的图像始终为 72x72 像素，因此上面是 72。再说一次，没有什么特别令人兴奋的。

我的困难是尝试旋转 Canvas 内的图像，以便单个图像按照 rotate 中传递的值旋转，而不是整个 Canvas 本身。我尝试添加以下代码并进行多种排列，替换上面对 for 循环中 context.drawImage 的调用，但到目前为止没有运气:

context.translate(72 / 2, 72 / 2);
context.rotate(rotate);
context.drawImage(img, x, y);
context.rotate(0);
context.translate(-72 / 2, -72 / 2);

为了帮助可视化我想要实现的效果，以下是旋转设置为 0 时绘制的内容:

这是我希望 Canvas 上的平铺图像旋转 45 度时的样子(例如):

我想指出的是，我并不是试图旋转整个 Canvas - 我知道如何做到这一点，但这不是我想要实现的效果，因为我需要图标保持在各自的位置x、y 位置。此外，旋转整个 Canvas 会带来截 Angular 挑战。

任何帮助将不胜感激!

Answer 1

最简单的方法是覆盖当前转换

ctx.setTransform(scale, 0, 0, scale, x, y); 
ctx.rotate(rotate); 
ctx.drawImage(img, -img.width / 2, -img.height/ 2); 

在x绘制图像中心, y ，旋转 rotate左右img居中，并按 scale 缩放。标度 1 表示没有标度。

例如在清除 Canvas 之前重置为默认变换

ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

因为在引擎盖下 ctx.rotate至少需要 1 个 sin 和 1 个 cos、12 个临时数，然后是 12 次乘法和 8 次加法。如果缩放是均匀的(x 和 y 的缩放相同)，则使用简化方法创建矩阵会更快。请注意，如果比例始终为 1，则不需要比例`

此外，当图像加载时，您可以将旋转点设置为图像的属性。

图像加载时设置偏移量

img.offset_x = - img.naturalWidth / 2;  // NOTE I use snake_case for the property names
img.offset_y = - img.naturalHeight / 2; // so that the names will never clash with
                                        // future changes to the standard  

渲染该图像

const ax = Math.cos(rotate) * scale;
const ay = Math.sin(rotate) * scale;
ctx.setTranform(ax, ay, -ay, ax, x, y);
ctx.drawImage(img, img.offset_x, img.offset_y);