Javascript 尝试旋转画布时，出现了一些问题

因此，我正试图用HTML5制作一个很好的办公室互动地图，用于文档记录（跟踪电话分机、端口号等），由于我们的许多办公室和隔间都是相同的，我想我应该每种类型的办公室都有一个，然后在所有匹配的办公室中复制它。我唯一的问题是，我无法正确旋转画布。我已经看完了所有的教程，但由于某种原因，我的图像一直被切断。我似乎找不到问题的根源

有什么想法吗

以下是我目前的代码：

测试交互式办公室示意图
html，正文{
边际：0px；
填充：0px；
}
函数addOffice（类型、id、名称）{
var canvas=document.createElement（'canvas'）；
canvas.id=id；
canvas.style.position=“绝对”；
canvas.style.left=“20px”；
canvas.style.class=“办公室”；
var context=canvas.getContext（'2d'）；
context.beginPath（）；
context.moveTo（0,0）；
如果（类型==1）{
宽度=80；
高度=80；
lineTo（2,0）；
上下文。lineTo（2,20）；
二次曲线（22,20,22,0）；
lineTo（60,0）；
lineTo（60,80）；
lineTo（0,80）；
lineTo（0,0）；
}
context.lineWidth=2；
context.strokeStyle='black'；
stroke（）；
context.textb基线=“字母”；
context.textAlign=“中心”；
context.fillText（accupentname，canvas.width/2，canvas.height/2）；
document.body.appendChild（画布）；
canvas=document.getElementById（“1”）；
context=canvas.getContext（'2d'）；
var tempCanvas=document.createElement（“画布”），
tempCtx=tempCanvas.getContext（“2d”）；
tempCanvas.width=canvas.width；
tempCanvas.height=canvas.height；
tempCtx.drawImage（canvas，0，0，canvas.width，canvas.height）；
clearRect（0，0，canvas.width，canvas.height）；
context.save（）；
context.translate（canvas.width/2，canvas.height/2）；
旋转（180*Math.PI/180）；
drawImage（tempCanvas，0,0,80,80,40,40,80,80）；
restore（）；
}
addOffice（1，1，“测试”）；

---

图像不会显示，因为您正在画布外绘制图像。试试这个：

context.drawImage(tempCanvas, 0, 0, 80, 80, -40, -40, 80, 80);

---

翻译和旋转上下文后，需要向后翻译：

context.translate(canvas.width / 2, canvas.height / 2);
context.rotate(180 * Math.PI / 180);

/// here, translate back:
context.translate(-canvas.width / 2, -canvas.height / 2);

context.drawImage(tempCanvas, 0, 0);

（如果目标大小与源大小相同，则不需要剪裁和/或指定宽度和高度）

但是，如果您只想翻转图像或将其旋转180度，您可以使用

缩放

画布，而不是使用负值-请记住反转坐标（）：

更深入地了解一般的转换（更新） 为了更好地解释转换是如何工作的，让我们经历不同的阶段

Origo

（）始终是坐标系中的点[0,0]（或者更准确地说是轴交叉的点）。当您使用转换时，这是在画布的上下文中转换的点

这也是为什么在将转换应用于上下文而不是元素时直接操作上下文而不是画布的原因（否则，当您将旋转转换应用于元素时，元素将自身旋转，这可以通过CSS实现）

最初，坐标系如下所示（白色混合区域是画布的不可见区域，中心正方形是画布，蓝色网格是上下文和当前坐标系）：

（注意：忽略负Y轴-我在制作图形时设法忽略了该细节-Y轴当然垂直向下为正）

如果我们现在将画布3.5平移3.5个点，以获得位于中心的

origo

，则上下文和坐标系将如下所示：

如果我们现在想在

origo

点应用旋转。这就是为什么我们需要在旋转之前进行平移，因为当应用旋转时，我们会得到以下结果：

如果我们现在只绘制图像，它将不会居中，因为

drawImage

从图像的左上角绘制图像。这意味着它看起来像这样：

这就是为什么我们需要翻译回origo，以便补偿图像的角点

然而，由于我们也应用了旋转，origo也将相对于当前系统方向移动

我们向后平移（图像大小的一半，以获得图像的中心点在上一个

origo

点）-旋转保持不变：

现在我们可以调用

drawImage

，因为现在您可以看到

origo

似乎处于此操作的正确位置：

---

你的提琴没用..格式化它…将js代码放在js部分中，bot the htmlBetter fiddle:。drawImage函数应该将图像作为第一个参数，而不是画布对象。@Bucky24可以接受任何图像元素，包括

、

和

ooooooohh。所以我想澄清一下，在我旋转之后，绘图的起点会重置为（0,0）？这只发生在翻译上，还是发生在其他东西上？@SalmonMode实际上什么都不会重置。由于旋转发生在origo（相对于坐标系的0,0点）周围，所以在旋转之前，您需要进行平移，以表示“在这个位置，我想旋转所有东西”。但是作为

drawImage

从左上角绘制图像

context.drawImage(tempCanvas, 0, 0, 80, 80, -40, -40, 80, 80);

context.translate(canvas.width / 2, canvas.height / 2);
context.rotate(180 * Math.PI / 180);

/// here, translate back:
context.translate(-canvas.width / 2, -canvas.height / 2);

context.drawImage(tempCanvas, 0, 0);

context.scale(-1, -1);
context.drawImage(tempCanvas, -tempCanvas.width, -tempCanvas.height);