JavaScript Canvas 转换文本

Question

我有以下问题:我需要在 HTML Canvas 上转换文本，例如给它一个梯形形状。这是我尝试过的:

context.beginPath();
context.moveTo(0, 0);
context.lineTo(200, 0);
context.lineTo(100, -100);
context.lineTo(0, -100);
context.closePath();
context.clip();
context.fillText("Hello World", this.x, this.y);

正如您可能已经猜到的那样，文本被剪切而不是转换以适应形状。下面是我正在尝试做的事情以及我成功做到的事情的图片。

感谢任何帮助:)

我设法做到的:

我想做的事:

Answer 1

您可以做的是获取一个虚拟 Canvas 元素，在其中放置普通文本，然后您可以将自己的数学应用到 textCtx.getImageData 中的像素颜色值。到您创建的另一个 imageData 数组上，这样您就可以将其放入另一个 Canvas 中，并使用 transformedTextCtx.putImageData 进行正确的转换，最后用 ctx.drawImage 将其 Canvas 绘制到原始上下文上.

我假设您知道要应用的数学类型，如果不知道，我建议您研究倾斜和缩放，并找出如何将两者结合起来。

imageData 的 mdn 资源方法位于 Canvas 渲染上下文页面的“像素操作”小节中:https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#Pixel_manipulation