如何旋转和镜像画布元素？

Question

我来翻译一下：

我有一个问题需要解决： 我的画布元素（1280x720）需要被水平镜像并旋转180度。 然后，该画布将成为一个base64图像（无任何问题）。

我尝试了：

var ctx =meinElement.getContext('2d');
meinElement.width = 1280;
meinElement.height = 720;
ctx.scale(-1, 1);
ctx.translate(meinElement.width-1,   meinElement.height-1);
ctx.rotate(Math.PI);
ctx.drawImage(video, 0, 0, meinElement.width, meinElement.height);

旋转效果非常好，但镜像会导致出现黑色元素 - 无论我先旋转还是先镜像 - 有人有想法吗？

非常感谢！

- Polaris

Answer 1

setTransform(1,0,0,-1,0,canvas.height);

使用setTransform方法，它需要6个数字。前两个是x轴方向和缩放比例的像素值，默认为1,0。接下来两个是y轴方向和缩放比例的像素值，默认为0,1。最后两个是原点，即在画布上绘制时，如果在0,0处绘制，则会绘制在哪里。默认为左上角的0,0。

将画布旋转180度会翻转x和y轴。x轴从1,0变为-1,0，y轴从0,1变为0,-1。

要在x轴上进行镜像反转，只需要反转x轴的分量，这样旋转-1,0就会镜像到1,0。

现在我们需要设置原点。x轴正常地从左到右移动，因此x原点在左侧的0处。y轴从下往上移动，因此原点需要在画布底部。

结果是

ctx.setTransform(1,0,0,-1,0,canvas.height);
ctx.drawImage(0,0)

顺便说一下，将图像旋转180度然后沿X轴翻转与只沿Y轴翻转是相同的。

- Blindman67

---

非常感谢您的详细解释！完美运作 :-) - Polaris