Breaking

Post Top Ad

Your Ad Spot

miércoles, 13 de noviembre de 2019

Canvas - una introducción

La etiqueta <canvas> se utiliza para dibujar gráficos. Cualquier texto dentro de este elemento se mostrará solo en los navegadores que no soportan <canvas>.
El canvas cuenta con varias métodos() y propiedades. A continuación algunas de ellas.
JavaScriptDescripciónDefecto
widthcanvas.widthDetermina (sets) o devuelve (returns) la anchura del canvas300
heightcanvas.heightDetermina (sets) o devuelve (returns) la altura del canvas150
getContext()canvas.getContext("2d");Devuelve un objeto que proporciona todos los métodos y propiedades para dibujar en el canvas. 
toDataURL()canvas.toDataURL(tipo);Convierte el contenido del canvas en una imágen - data:uri. El parámetro entre paréntesis indica el tipo de imágen.image/png
Vea la chuletastar con las propiedades y metodos() de canvas.
<canvas id="Canvas1" width="250" height="220">Su navegador no soporta canvas :( </canvas>
Sin embargo, el elemento <canvas> no tiene habilidad de dibujo en sí mismo, siendo sólo un contenedor para gráficos. Por esto es importante que el <canvas> tenga asignado un id, ya que habrá que manipularlo a través de JavaScript. Utilizaremos document.getElementById para encontrar el canvas.
El método getContext() devuelve un objeto ( puede llamar este objeto como quiera; a continuación lo llamaremos ctx ) que proporciona métodos() y propiedades para dibujar en el canvas.
window.onload = function() {
 // encuentre el canvas para dibujar.
 var canvas = document.getElementById("Canvas1");
  // si existe el canvas y si tiene el método getContext
  if (canvas && canvas.getContext) {
  // utilice el método getContext para recuperar el contexto del canvas
  var ctx = canvas.getContext("2d");
  // y si tenemos contexto
   if (ctx) {
   // dibujamos
   }
  }
}

El sistema de coordenadas

Para dibujar necesitaremos saber las coordenadas x e y de los puntos utilizados. Por ejemplo el código para dibujar un rectángulostar es rect(x,y,w,h), donde x e y son las coordenadas de la esquina izquierda arriba, w es la anchura y h es la altura del rectángulo.
En el <canvas>:
- El punto cuyas coordenadas son: x=0; y=0; se corresponde con la esquina izquerda arriba del canvas.
- Abajo en la esquina derecha x=canvas.width; y=canvas.height;.
Pase el ratón sobre el siguiente <canvas> para ver sus coordenadas x e y:
x: 189, y: 142
Pase por encima del canvas para obtener la posición actual del ratón.

No hay comentarios.:

Publicar un comentario

Post Top Ad

Your Ad Spot

Páginas