Question

我有这个代码

Allocate.prototype.Rotate = function () {
var canvas = document.getElementById("underCanvas");
var context = canvas.getContext("2d");
canvas.width = canvas.width;
context.lineWidth = "1";
context.save();
context.translate(this.drawStart.x + this.img.width * 0.5,
              this.drawStart.y + this.img.height * 0.5);
context.rotate(Math.Pi/2);
context.translate(-(this.drawStart.x + this.img.width * 0.5),
              -(this.drawStart.y + this.img.height * 0.5));
context.drawImage(this.img, this.drawStart.x, this.drawStart.y, this.drawStart.w, this.drawStart.h, this.drawStart.x, this.drawStart.y, this.drawStart.w, this.drawStart.h);

context.rect(this.drawStart.x, this.drawStart.y, this.drawStart.w, this.drawStart.h);
context.stroke();
context.restore();
}

我认为这种类分配方法应该做什么 - 是在rectange中将图像(this.img)旋转90度。出来的是：它绘制了一个变形的矩形，但图像仍未旋转。为什么？

任何人都可以帮助我实现这个目标吗？

此代码是类分配的一部分。我正在做一个web画，并希望能够旋转分配的区域。感谢。

Answer 1

如果要按中心旋转图像，则需要在旋转前进行平移（根据需要进行调整）：

/// first translate
context.translate(this.drawStart.x + this.img.width * 0.5,
                  this.drawStart.y + this.img.height * 0.5);

/// then rotate
context.rotate(0.5 * Math.PI);  /// 90 degrees

/// then translate back
context.translate(-(this.drawStart.x + this.img.width * 0.5),
                  -(this.drawStart.y + this.img.height * 0.5));

/// draw image

它不起作用的原因可能有几个：

图像是否正确加载（即，是用于使图像在绘制时可用的onload处理程序）
属性包含哪些值且有效（即未定义等）

要使旋转起作用，您需要选择旋转点或旋转。枢轴通常是图像的中心，通过使用其半宽和高度获得。

由于旋转始终在坐标系的原点（0,0）处旋转，因此首先需要将此原点转换为图像中心的位置。

然后旋转，并正确绘制图像，您需要在旋转后平移，否则图像的角落将位于中心，因为图像始终从左上角绘制。

当然，必须使用相同的变换绘制矩形。

使用画布上下文旋转图像

1 个答案: