画布中带有弧线方向的文本，但字母应保持垂直[关闭]答案

【问题标题】：Text with arc direction in Canvas, but letters should keep vertical [closed]画布中带有弧线方向的文本，但字母应保持垂直[关闭]
【发布时间】：2022-02-14 03:55:49
【问题描述】：

这就是我想要做的：

我得到的更接近的是像这个示例这样的桥文本，但它使用桥的 Top 基线，我不知道如何将它添加到我的需要：

Bridge Text Effect in HTML5 Canvas

小提琴： https://jsfiddle.net/0btz7a1g/

/// (c) Ken Fyrstenberg Nilsen, Abidas Software .com
/// License: CC-Attribute

var ctx = demo.getContext('2d'),
    font = '64px impact',
    w = demo.width,
    h = demo.height,
    curve,
    offsetY,
    bottom,
    textHeight,
    isTri = false,
    dltY,
    angleSteps = 180 / w,
    i = w,
    y,
    os = document.createElement('canvas'),
    octx = os.getContext('2d');

os.width = w;
os.height = h;

octx.font = font;
octx.textBaseline = 'top';
octx.textAlign = 'center';

function renderBridgeText() {

    curve = parseInt(iCurve.value, 10);
    offsetY = parseInt(iOffset.value, 10);
    textHeight = parseInt(iHeight.value, 10);
    bottom = parseInt(iBottom.value, 10);
    isTri = iTriangle.checked;

    vCurve.innerHTML = curve;
    vOffset.innerHTML = offsetY;
    vHeight.innerHTML = textHeight;
    vBottom.innerHTML = bottom;

    octx.clearRect(0, 0, w, h);
    ctx.clearRect(0, 0, w, h);

    octx.fillText(iText.value.toUpperCase(), w * 0.5, 0);

    /// slide and dice
    i = w;
    dltY = curve / textHeight;
    y = 0;
    while (i--) {
        if (isTri) {
            y += dltY;
            if (i === (w * 0.5)|0) dltY = -dltY;
        } else {
            y = bottom - curve * Math.sin(i * angleSteps * Math.PI / 180);
        }
        ctx.drawImage(os, i, 0, 1, textHeight,
        i, h * 0.5 - offsetY / textHeight * y, 1, y);
    }
}

iCurve.onchange = iOffset.onchange = iHeight.onchange = iBottom.onchange = iText.onkeyup = iTriangle.onchange = renderBridgeText;

renderBridgeText()

span {
    display:inline-block;
    width:70px;
    text-align:right;
    font:12px sans-serif;
}

<canvas id=demo width=400 height=300></canvas>
<br>
    <span>Curve:</span>
<input id="iCurve" type="range" min=0 max=200 value=110>
<span id="vCurve">110</span>
    <br><span>OffsetY:</span>
<input id="iOffset" type="range" min=0 max=100 value=4>
<span id="vOffset">0</span>
    <br><span>Text height:</span>
<input id="iHeight" type="range" min=0 max=200 value=64>
<span id="vHeight">64</span>
    <br><span>Bottom:</span>
<input id="iBottom" type="range" min=0 max=200 value=200>
<span id="vBottom">200</span>
    <br><span>Triangle:</span>
    <input id="iTriangle" type="checkbox">
<br><span>Text:</span>
<input id="iText" type="text" value="BRIDGE TEXT">

有没有什么方法可以在使每个字母像图像中一样垂直的同时弧形文本？

【问题讨论】：

请将您的代码添加到您的问题中，不要通过假装“小提琴”这个词是代码来绕过规则。阅读“minimal reproducible example”指南，了解我们的预期。
是的。执行与链接到的代码相同的操作。绘制文本，将其切成垂直条，将每个切片重新定位成弧形。
@Ouroborus 这就是我一整天都在尝试做的事情，试图将该示例添加到我的需求中。
@DavidThomas 我添加了另一个链接到包含所有代码的堆栈溢出帖子。如果我有自己的代码并进行了有效的更改，我会在这里添加。但不管怎样，我明白这个规则，我只是觉得这里没有意义。

标签： javascript html canvas html5-canvas

【解决方案1】：

该工具的工作原理是正常绘制文本，将其切成 1px 宽的垂直条，然后使用垂直缩放和偏移重新绘制这些条。了解.drawImage() 的功能有助于实现这一目标。根据您的需要更改此算法就是更改缩放和偏移的计算方式。

为每个条带计算两个参数：偏移量和高度。 y 控制圆弧但直接用于设置目标高度。 h * 0.5 - offsetY / textHeight * y 缩放和偏移 y 以产生偏移量。

由于y 几乎直接从sin() 派生而来，我们可以将其用作偏移量。高度将保持固定，因此我们使用textHeight。

变化

ctx.drawImage(os, i, 0, 1, textHeight,
                  i, h * 0.5 - offsetY / textHeight * y, 1, y);

到

ctx.drawImage(os, i, 0, 1, textHeight,
                  i, y, 1, textHeight);

成功了。

这是必要的最小更改。关于如何进一步清理代码，我将把它留给自己作为练习。

【讨论】：

非常感谢！