Categorías destacadas
Artículo
|
Ejemplo con canvas de HTML 5 |
Canvas es una etiqueta o elemento en HTML que permite la generación de gráficos en forma dinámica por medio de programación dentro de una página. Inicialmente lo implementó Apple para Safari, pero luego fue adoptado por otros navegadores, como Firefox a partir del 1.5, Opera y es estandarizado por WHATWG.
Vamos a ver un ejemplo básico de como utilizar canvas. El ejemplo consistirá en colocar dos cuadrados de distintos colores uno encima del otro, como la imagen que os mostramos.
.jpg)
Lo primero que hacemos es añadir al código HTML, la zona correspondiente al canvas. Por defecto el tamaño de este es de 150 x 150 píxeles, pero se puede cambiar utilizando sus propiedades “width” y “height”.
A continuación, para hacer referencia al canvas y poder pintar sobre él, utilizaremos javascript.
Lo primero que hacemos es obtener la referencia hacia el elemento, como hemos realizado habitualmente.
Una vez que se obtiene la referencia hacia el canvas, obligatoriamente hay que ejecutar su método “getContext” pasándole como argundo “2d”. De esta forma tendremos el contexto de dibujo y podremos empezar a dibujar las figuras.
A continuación lo que hacemos es darle un valor a la propiedad “fillStyle” del contexto. A esta propiedad se le asigna el color.
De esta forma se pintará con un color rojo sólido, pero también se puede asignar transparencia, que será lo que se aplique en el segundo cuadro. Eso lo podemos hacer de la siguiente forma:
El último parámetro es el correspondiente a la transparencia. Cuanto mayor sea el valor, más sólido será el color.
Para pintar el rectángulo, se utiliza el método “fillRect”.
Los parámetros de este método son:
Vamos a ver un ejemplo básico de como utilizar canvas. El ejemplo consistirá en colocar dos cuadrados de distintos colores uno encima del otro, como la imagen que os mostramos.
Lo primero que hacemos es añadir al código HTML, la zona correspondiente al canvas. Por defecto el tamaño de este es de 150 x 150 píxeles, pero se puede cambiar utilizando sus propiedades “width” y “height”.
<canvas id="canvas" width="150" height="150"></canvas>
A continuación, para hacer referencia al canvas y poder pintar sobre él, utilizaremos javascript.
Lo primero que hacemos es obtener la referencia hacia el elemento, como hemos realizado habitualmente.
var canvas = document.getElementById("canvas");
Una vez que se obtiene la referencia hacia el canvas, obligatoriamente hay que ejecutar su método “getContext” pasándole como argundo “2d”. De esta forma tendremos el contexto de dibujo y podremos empezar a dibujar las figuras.
var ctx = canvas.getContext("2d");
A continuación lo que hacemos es darle un valor a la propiedad “fillStyle” del contexto. A esta propiedad se le asigna el color.
ctx.fillStyle = "rgb(200,0,0)";
De esta forma se pintará con un color rojo sólido, pero también se puede asignar transparencia, que será lo que se aplique en el segundo cuadro. Eso lo podemos hacer de la siguiente forma:
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
El último parámetro es el correspondiente a la transparencia. Cuanto mayor sea el valor, más sólido será el color.
Para pintar el rectángulo, se utiliza el método “fillRect”.
ctx.fillRect (10, 10, 100, 100);
Los parámetros de este método son:
- Primero: El valor de la coordenada X.
- Segundo: El valor de la coordenada Y.
- Tercero: Anchura del rectángulo.
- Cuarto: Altura del rectángulo.Con esto ya tendríamos creado el ejemplo. Vamos a ver ahora el código completo.
<html>
<head>
<script type="application/javascript">
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 100, 100);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 100, 100);
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>
 |
Publicado por: angel carrero |
|
|
Comentarios
Últimas noticias
· factura
Últimos artículos
