miércoles, 7 de agosto de 2013

HTML5 - Jugando con canvas

Hasta ahora no había tenido tiempo de mirarme un poco el elemento

canvas

de

HTML5

y tenía ganas de jugar un poco a ver que permite y que no permite hacer este elemento HTML. Rápidamente al buscar ejemplos en los buscadores me di cuenta que se pueden llegar a conseguir animaciones realmente elaboradas en una página web usando exclusivamente código HTML y js.

La ventaja de todo esto es que no necesitas instalar ningún plugin en el navegador cliente para ver estas animaciones como pasaba con flash o silverlight.

En este enlace podéis ver ejemplos realmente elaborados que no tienen nada que ver con el mío que espero os inspiren.

Por otro lado este es el resultado de 30' jugando con canvas:










Os dejo el código HTML:
<label for="textBox">Texto a Mostrar: </label>
<input id="textBox" type="text" onchange="javascript:fillText();" onkeyup="javascript:fillText();" value="areaTIC"/>
<br /><br />
<label for="txtWidth">Width: </label>
<select id="txtWidth" onchange="javascript:fillText();">
    <option selected>200</option>
    <option>300</option>
</select>
<label for="txtHeight">Height: </label>
<select id="txtHeight" onchange="javascript:fillText();">
    <option selected>100</option>
    <option>200</option>
</select>
<br /><br />
<select id="fontName" onchange="javascript:fillText();">
    <option selected>Arial</option>
    <option>Verdana</option>
</select>
<select id="fontSize" onchange="javascript:fillText();">
    <option selected>30px</option>
    <option>20px</option>
</select>
<br /><br />
<select id="textType" onchange="javascript:fillText();">
    <option selected>Stroke</option>
    <option>Fill</option>
</select>
<br /><br />
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;" />   

<script>
    fillText();
    function fillText() {
        var t = document.getElementById("textBox");
        var c = document.getElementById("myCanvas");
        var fontName = document.getElementById("fontName");
        var fontSize = document.getElementById("fontSize");
        var textType = document.getElementById("textType");
        var heigth = document.getElementById("txtHeight");
        var width = document.getElementById("txtWidth");
        var fontSizeName = fontSize.value + ' ' + fontName.value;
        var x = (width.value / 2);
        var y = (heigth.value / 2);

        c.width = width.value;
        c.height = heigth.value;

        var ctx = c.getContext("2d");
        ctx.clearRect(0, 0, 200, 100);
        ctx.font = fontSizeName;
        ctx.textAlign = "center";

        if (textType.value == "Stroke")
            ctx.strokeText(t.value, x, y);
        else
            ctx.fillText(t.value, x, y);
    }
</script>
Hasta aquí el artículo, recordar que podéis seguir

areaTIC

en las principales redes sociales y os animo a participar con vuestros comentarios y tal. Que vaya bien la semana!

No hay comentarios:

Publicar un comentario