使用 javascript 从 HTML5 画布镜像形状

Posted 2023-03-05

【中文标题】使用 javascript 从 HTML5 画布镜像形状

【英文标题】：Mirror a shape from HTML5 canvas using javascript

【发布时间】：2021-11-13 08:42:01

【问题描述】：

我在 html 画布上制作了这个形状，所以基本上我想要做的是镜像该形状并将其移动到画布的不同部分。我试过folds.scale(-1,1); 但它不起作用。我已经查看了关于镜像形状的另一篇文章，但我的代码不知何故不起作用。

HTML Canvas: How to draw a flipped/mirrored image?

这是我的代码：

function folds(x, y ,z)
    draw.beginPath();
    draw.arc(x, y, z, 5.25, 2 * Math.PI);
    draw.closePath();
    draw.lineWidth = 7;
    draw.strokeStyle = "black";
    draw.stroke();


function folds2()
    folds.scale(-1,1);

【参考方案1】：

最流行的解决方案是在您的 HTML 中创建另一个不可见的画布并将其水平尺寸向后转换：

const flippedCanvas = document.getElementById("flipped-canvas");
const flippedContext = canvas.getContext("2d");

flippedContext.scale(-1, 1);

然后，您可以在该画布上绘制图像（或形状）并使用 drawImage 将其复制到原始画布：

flippedContext.beginPath();
// ...
flippedContext.stroke();
draw.drawImage(flippedCanvas, 0, 0);