如何在HTML5（或Fabric.js）中制作Rooftext效果和Valley文字效果

如何在HTML5（或Fabric.js）中制作Rooftext效果和Valley文字效果

这是原始代码的修改版本（与我的原始代码相比，所提供的代码已更改了值..-）），可以通过使用参数来产生所有这些形状：
初始化：

var ctx = demo.getContext('2d'), /// context    font = '64px impact',        /// font    w = demo.width,   /// cache canvas width and height    h = demo.height,    curve, /// radius    offsetY,          /// offset for text    bottom,/// bottom of text    textHeight,       /// text height (region of text)    isTri = false,    /// is triangle shaped (roof)    dltY,  /// delta for triangle    angleSteps = 180 / w,        /// angle steps for curved text    i = w, /// "x" backwards    y,     /// top of text    /// offscreen canvas that holds original text    os = document.createElement('canvas'),    octx = os.getContext('2d');os.width = w;os.height = h;/// set font on off-screen canvas where we draw itoctx.font = font;octx.textbaseline = 'top';octx.textAlign = 'center';

主要功能：

/// renderfunction renderBridgeText() {    /// demo stuff snipped (see link)    /// clear canvases        octx.clearRect(0, 0, w, h);    ctx.clearRect(0, 0, w, h);    /// draw text (text may change)    octx.fillText(iText.value.toUpperCase(), w * 0.5, 0);    /// slide and dice    dltY = curve / textHeight;  /// calculate delta for roof/triangle    y = 0;/// reset y in case we do roof    i = w;/// init "x"    while (i--) {        if (isTri) { /// bounce delta value mid-way for triangle y += dltY; if (i === (w * 0.5)|0) dltY = -dltY;        } else { /// calc length based on radius+angle for curve y = bottom - curve * Math.sin(i * angleSteps * Math.PI / 180);        }        /// draw a slice        ctx.drawImage(os, i, 0, 1, textHeight,    i, h * 0.5 - offsetY / textHeight * y, 1, y);    }}