我有以下问题： 我需要在 HTML 画布上转换文本，例如给它一个梯形。 这是我尝试过的：
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);
正如您可能已经猜到的那样，文本被截断而不是变换以适应形状。下面是我正在尝试做的事情以及我设法做的事情的图片。
任何帮助表示赞赏:)
我做了什么：
我想做什么：
【问题讨论】：
标签： javascript canvas text transform
How to transform text
您可以在绘图前使用canvasContext.setTransform 转换您的文本（或其他任何内容）。您不需要任何第二张画布。
例子：
canvasContext.setTransform(1, 0, 0, 1, 0, 0); 是默认值canvasContext.setTransform(0.5, 0, 0, 1, 0, 0); 将宽度减小到 50%canvasContext.setTransform(1, 0, 0, 0.5, 0, 0); 将高度降低到 50%我无法很快解决这个问题。我会把它留给下一个用户来解决。
【讨论】：
您可以做的是获取一个虚拟画布元素，在其中放置您的普通文本，然后您可以将自己的数学运算应用于textCtx.getImageData 中的像素颜色值到您创建的另一个 imageData 数组中，然后您可以将使用transformedTextCtx.putImageData 将其转换为具有正确转换的另一个画布，最后使用ctx.drawImage 将其画布绘制到原始上下文中。
我假设您知道要应用的数学类型，如果不知道，我建议您研究倾斜和缩放，并找出如何将两者结合起来。
imageData 方法的 mdn 资源位于画布渲染上下文页面的“像素操作”小节中：https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#Pixel_manipulation
【讨论】：