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

BTW旋转180然后镜像X与镜像Y相同。

如何旋转和镜像canvas元素？

1 个答案:

的setTransform（1,0,0，-1,0，canvas.height）;