<分区>
我有以下问题: 我的 Canvas 元素 (1280x720) 需要水平镜像并旋转 180 度。 之后， Canvas 变成了 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);
旋转就像一个魅力，但镜像会导致黑色元素 - 无论我先旋转还是镜像 - 有人有想法吗？
非常感谢!
最佳答案
使用 setTransform 它需要 6 个数字。前 2 个是以像素为单位的 x 轴的方向和比例。默认为 1,0。接下来的两个是y轴的方向和比例。默认为 0,1。最后两个是起源。如果在 0,0 处绘制，将在 Canvas 上绘制某些内容。默认情况下，它位于左上角 0,0。
将 Canvas 旋转 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 轴从下向上移动，因此原点需要位于 Canvas 的底部。
结果是
ctx.setTransform(1,0,0,-1,0,canvas.height);
ctx.drawImage(0,0)
顺便说一句，旋转 180 度，然后镜像 X 与镜像 Y 相同。
关于javascript - 如何旋转和镜像 Canvas 元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42844470/
相关文章：
javascript - 如何在 Python 中从 JavaScript CryptoJS.AES.encrypt(password, passphrase) 解密密码
javascript - 单击 bootstrap 折叠时页面丢失当前位置
javascript - 使用 npm react-native-canvas latest 在 react-native 中使用 canvas.toDataURL() 时出错
javascript - 下一条语句在前一条语句结束之前运行
html - Margin-top 不适用于 <p> 和 <a> 标签？
javascript - 如何在 ngFor 中实例化和使用后续数组？