1

当我尝试旋转我绘制的图像时，我正在使用 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);
}

请帮帮我

4

1 回答 1

0

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

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();
于 2014-10-07T00:33:22.770 回答