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

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);

旋转就像一个魅力，但镜像会导致黑色元素 - 无论我先旋转还是镜像 - 有人有想法吗？

多谢！

Answer 1

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

使用setTransform它需要6个数字。前 2 个是 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 轴的 x 分量，从而使旋转的 -1,0 镜像到 1,0。

现在我们需要设置原点。x 轴像正常的 1,0 一样从左向右移动，因此 x 原点位于左侧 0。y 轴从下向上移动，因此原点需要位于画布的底部。

那么结果就是

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

顺便说一句，旋转 180 度后，X 镜与 Y 镜相同。