Como fazer efeito de texto de telhado e efeito de texto vale em HTML5 (ou Fabric.js)

Question

Oct 23, 2013, 04:36 PM

Como fazer efeito de texto de telhado e efeito de texto vale em HTML5 (ou Fabric.js)

Eu estou usando abaixo do código:

<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>

Eu preciso do efeito de texto como abaixo imagens, eu tentei muito para fazer isso, mas não posso.

Alguém por favor pode me ajudar?

Também podemos usar o objeto ativo de fabric.js com contexto?