html如何让图片弯曲,HTML 5在图像上绘制弯曲文本

您可以使用 SVG元素在路径上绘制文本。它可能有点繁琐，但我会引导你完成它。

首先，您需要创建一个部分，其中包含您希望文本遵循的路径。如果您只使用元素，这会使事情变得更容易，但这不起作用;它必须是元素。幸运的是，SVG的路径图确实支持circular arcs，所以没有必要对Bézier曲线表示不满。

这里我定义了两个以(0,0)为中心的半圆弧，半径为120; cp1在顶部顺时针方向移动，cp2逆时针绕底部移动：

SVG的实际绘图部分包含在元素中，以将原点移动到SVG的中心(在这种情况下，其尺寸为300×300)：

现在创建一个具有所需外观属性的元素，并将元素放在其中。使用text-anchor="middle"保持文本集中对齐，并将startOffset属性设置为沿着要锚定文本的路径的距离。在这种情况下，偏移量等于直径为120的圆周长的四分之一，即2×π×120/4或188.5。 dominant-baseline属性指示文本如何与曲线对齐;设置为middle表示文本的中心线与路径对齐，因此我们可以对上下曲线使用相同的半径。 (在某些情况下，这可能会使文本看起来有点挤压。您可以通过设置letter-spacing属性来解决此问题。)

dominant-baseline="central">Smooth Roast

dominant-baseline="central">Coffee Company

徽标中间的水平文字可以采用相同的方式完成，但使用普通的元素代替元素：

SINCE

1981

这是完成的结果：

Smooth Roast

Coffee Company

SINCE

1981