How to make rooftext effect and valley text effect in HTML5 (or Fabric.js)

问题

I am using below code:

<script type=\'text/javascript\'>//<![CDATA[ 
window.onload=function(){
/// (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,
    angleSteps = 255/h,
    i = h,
    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);

    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, w * 0.5, 0);

    /// slide and dice
    i = w;
    while (i--) {
        y = bottom + curve * Math.sin(i / angleSteps * Math.PI /160);
        ctx.drawImage(os, i, offsetY, 1, textHeight,i,offsetY, 1, y);
    }
}
iCurve.onchange = iOffset.onchange = iHeight.onchange = iBottom.onchange = iText.onkeyup = renderBridgeText;
renderBridgeText()
}//]]>  
</script>
</head>
<body>
  <canvas id=demo width=600 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>Text:</span>
<input id=\"iText\" type=\"text\" value=\"BRIDGE TEXT\">
</body>

I need the text effect like below images,I have tried a lot to make this but i cannot.

$\"enter$

Can anyone please help me out?

Also can we use active object from fabric.js with context?

回答1:

Here is a modified version of the original code (the provided code in question has changed values compared to my original code.. .-) ) which can produce all these shapes just by playing around with the parameters:

The roof is not super but I'll leave it to you to add scaling support as this is meant as an example.

ONLINE DEMO HERE

Initialization:

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 it
octx.font = font;
octx.textBaseline = 'top';
octx.textAlign = 'center';

Main function:

/// render
function 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);
    }
}

来源：https://stackoverflow.com/questions/19544735/how-to-make-rooftext-effect-and-valley-text-effect-in-html5-or-fabric-js

标签

html5

canvas

html5-canvas

fabricjs