Question

当我尝试旋转我绘制的图像时，我正在使用Javascript编写程序。我试图在谷歌搜索找到我的答案，但我得到的是如何旋转整个画布。我正在寻找的是一种只旋转图像的方法（想象一下。我想根据他走的方向旋转一个战士）。我尝试了许多不同的代码，但所有代码都是相同的，旋转整个画布。

以下是我使用的示例：

ctx.rotate(20*Math.PI/180);

还有：

var angle = 0; //init angle
images[0].onload = function () {
    ctx.drawImage(images[0], 0, 0);
    setInterval(function () {
        ctx.save();
        ctx.clearRect(-ctx.canvas.width / 2, -ctx.canvas.height / 2, ctx.canvas.width, ctx.canvas.height);
        ctx.rotate(Math.PI / 180 * (angle += 10)); //rotating at 10 degrees interval..
        ctx.drawImage(images[0], 0, 0);
        ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2);
        ctx.restore();
    }, 16);
}

请帮帮我

Answer 1

画布的旋转是如何相对于图像创建旋转的一部分为了使图像的可见位置保持不变而不移动，您必须先将其居中如果不使图像居中，您将只能实现旋转整个画布的视觉效果你必须投入一些数学运算才能使它围绕图像中心旋转。

ctx.save();
ctx.translate(x, y); /*X and Y of the image, center point of the image */
ctx.rotate((Math.PI / 180) * rotation); /*rotation is in degrees, so this converts it to rads */
ctx.drawImage(img, -(img.width/2), -(img.height/2)); /* Draw and center the image */
ctx.restore();

我如何在Javascript中旋转图像？

1 个答案: