Kanvas/WMD/es/doc/kanvas.starting.w.md

2.3 KiB
Executable File

[[post_data { "author" : "KyMAN", "since" : 20210620, "version" : 20210620 }]]

Iniciando

Kanvas no es más que una pequeña librería ECMAScript 2015 totalmente autosuficiente, por lo que sólo requiere de la implementación en HTML de dicha librería para poder ser iniciada. Para ello podemos hacer uso de cualquiera de las direcciones puestas al principio del manual ([/es/#Kanvas]). El siguiente ejemplo HTML muestra la creación de un Kanvas vacío que ocupa todo el marco HTML del navegador.

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <title>Kanvas - Test</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta charset="utf-8" />

        <style data-type="text/css" data-language="CSS3" data-rel="stylesheet" charset="utf-8">

            html,body{
                height : 100%;
                margin : 0px;
            }

            body{overflow : hidden;}

            .kanvas{
                position : absolute;
                top : 0px;
                left : 0px;
                width : 100%;
                height : 100%;
            }

        </style>

        <script data-type="text/javascript" data-language="ECMAScript 2015" src="/Kanvas.ecma.js" data-crossorigin="anonymous" charset="utf-8"></script>

        <script data-type="text/javascript" data-language="ECMAScript 2015" charset="utf-8">

            kanvas = new Kanvas();

        </script>

    </head>
    <body></body>
</html>

Como podemos ver en el ejemplo, que el propio Kanvas es una clase objeto con la cual creamos un objeto el cual será el objeto que gestiona todo lo que se verá en este manual. Cada instancia Kanvas gestionará un único Kanvas en el GUI, permitiendo poder hacer uso de más de un elemento al mismo tiempo dentro del entorno HTML.

[[html_data { "title" : "Kanvas - Iniciando", "url" : "https://kanvas.k3y.pw/es/doc/kanvas.starting.html", "author" : "KyMAN", "since" : 20210620, "version" : 20210620, "key_words" : "kanvas,canvas,kyman,2d,graphics,iniciar,implementar,incluir", "description" : "Manual para iniciar Kanvas.", "project" : "Kanvas", "logo" : "https://kanvas.k3y.pw/images/kanvas.png" }]]