JMiur [E]

La etiqueta canvas es muy simple de agregar, sólo tiene tres atributos posibles, el ID con que la identificaremos, el ancho y el alto. Incluso estos dos últimos son opcionales y si no los ponemos, tendrá un tamaño por defecto de 300x150:
<canvas id="nombre" width="valor" height="valor"></canvas>
Puesta así no veremos absolutamente nada ya que es transparente aunque con CSS es posible agregarle algunas propiedades como márgenes, bordes, fondos, etc. Es que, en realidad, lo que hace la etiqueta no es otra cosa que crear un "lienzo", un espacio particular en donde podremos dibujar pixel por pixel utilizando JavaScript.

Como aún no todos los navegadores la soportan, es aconsejable colocar algún tipo de contenido alternativo, un texto, una imagen, algo que advierta que allí habrá algo; por ejemplo:
<canvas id="nombre" width="valor" height="valor"> ... aquí hay algo ... </canvas>
Una alternativa para que internet Exporer soporte esta etiqueta es agregar el script ExplorerCanvas y es lo que está agregado en esta entrada así que el demo (en teoría) también debería verse en ese navegador.

El script lo descargamos y lo agregamos de manera condicional (más información):
<!--[if IE]><script src="URL_excanvas.js"></script><![endif]-->
Para empezar a manipular el contenido de nuestro canvas, debemos empezar a escribir scripts; lo elemental es poder identificarla y para eso está el ID:
var miCANVAS = document.getElementById("nombre");
if (miCANVAS.getContext) {
var canvas = miCANVAS.getContext("2d");
// aquí lo manipularemos
} else {
// advertencia : el navegador no soporta canvas
}
A partir de eso, usaremos la variable para darle órdenes y lo primero será colocarle un color de fondo.
var miCANVAS = document.getElementById("nombre");
if (miCANVAS.getContext) {
var canvas = miCANVAS.getContext("2d");
canvas.fillStyle = "#FFF";
canvas.fillRect (0,0,300,200);
} else {
// advertencia : el navegador no soporta canvas
}
Usamos dos funciones, fillStyle y fillRect() que son las elementales. Con la primera, definimos el color de lo que dibujaremos:

fillStyle = "color" donde el color puede escribirse en cualquier formato ( "white"; "#FFFFFF", "rgb(255,255,255)", "rgba(255,255,255,1)"

y con la segunda, dibujamos un rectángulo lleno:

fillRect(x,y,ancho,alto) donde x e y son las coordenadas de inicio

así que simplemente, hemos hecho que nuestro canvas sea de color blanco, dibujando un rectángulo lleno que es igual al tamaño total.

Los rectángulos son las formas más simples y tenemos dos opciones disponibles, rectángulos llenos como el anterior o rectángulos que sólo tengan un borde, para esto último usamos otra función:

strokeRect(x,y,ancho,alto)

Para estas cosas básicas, hay una función más que nos permite "borrar" (hacer que algo sea transparente):

clearRect(x,y,ancho,alto)

Todas esas funciones tienen los mismos parámetros, definimos dónde se dibujará (con x e y) y definimos su tamaño.


Algunos ejemplos para jugar.

Creo tres funciones; con una, inicializo el lienzo, con otra dibujo rectángulos llenos y con otra cuadrados sin fondo; nada espectacular pero, para quien nada sabe de esto (yo) es un paso comparable al primer viaje a la luna


<script type="text/javascript">
function iniCANVAS(cual){
var miCANVAS = document.getElementById(cual);
if (miCANVAS.getContext) {
var canvas=miCANVAS.getContext("2d");
canvas.fillStyle="#FFF";
canvas.fillRect (0,0,300,200);
}
}
function drawSQUARES(cual,x1,y1,w,h,c) {
var miCANVAS = document.getElementById(cual);
if (miCANVAS.getContext) {
var canvas=miCANVAS.getContext("2d");
canvas.fillStyle=c;
canvas.fillRect(x1,y1,w,h);
}
}
function drawRECS(cual,x1,y1,w,h,c) {
var miCANVAS = document.getElementById(cual);
if (miCANVAS.getContext) {
var canvas=miCANVAS.getContext("2d");
canvas.fillStyle=c;
canvas.strokeRect(x1,y1,w,h);
}
}
</script>

<canvas id="demo" width="300" height="200"> <img src="URL_imagenAlterna" /> </canvas>

<script>iniCANVAS('demo')</script>

<button type="button" onclick="drawSQUARES('demo',10,20,50,50,'#F00');"> rectangulo 1 </button>
<button type="button" onclick="drawSQUARES('demo',30,100,70,50,'#00F');"> rectangulo 2 </button>
<button type="button" onclick="drawRECS('demo',50,10,50,50,'#000');"> rectangulo 3 </button>
<button type="button" onclick="drawRECS('demo',160,110,70,50,'#000');"> rectangulo 4 </button>

10 comentarios:

Felipe  

Es muy impresionante la posibilidad de guardarlos como imágenes, y mas si en el gráfico se pueden combinar imágenes y textos; en cierta manera se pueden emular algunas funcionalidades básicas de algunos servicios en la web para generar imágenes o animaciones, por ejemplo un "meme". :D

Responder
Shishi-Kan Dojo  

Hola, una consulta que no tiene que ver con esto.
Me gustaría poder poner las imagenes de Twitter, Facebook y Youtube en mi sidebar así como la tienes tu y que queden seguidas horizontalmente ya que me aparecen una arriba de la otra. Espero puedas ayudarme.
saludos

Responder
CristJian  

bastante buena esa comparación con el viaje a la luna jaja :D

como siempre dando muy buenos tutoriales :)

por cierto, ?no hay alguno sobre CSS para novatos como yo, algo asi como html elemental?

Muchas gracias :)

Responder
Beben Koben  

hohoho HTML5
so hot for discuss ;)

Responder
Raul Santos  

He comprobado que efectivamente te da la opción de guardar la imagen en Firefox, pero que eso no sucede en Chrome.

Responder
Johnny  

El HTML5 esta triunfando y se pueden hacer verdaderas maraviillas. En ese aspecto estoy verde todavia, poco a poco ire cogiendole el tranquillo. Saludos>>

Responder
JMiur  

Felipe
Es interesante para ver. Engorroso pero interesante.

Shishi-Kan Dojo
Habría que ver tu ejemplo concreto para resolver eso. En principio, si son enlaces con una imagen y no hay propiedades extras, se verán una al lado de la otra. Puede ser que al agregarlas, en el editor cree saltos de línea automático; eso se solucionaría escribiéndolas en una sola línea.
Pueden haber muchas otras alternativas, dependen de la plantilla; por eso, habría que verlo online para saber cuál es el motivo concreto.

CristJian
No, no he hecho nada sobre ese tema; lo más cerca que he llegado es a escribir estas dos entradas: 1 2

Raul Santos
Desconozco si Chrome requiere algo especial o simplemente no soporta esa función. Es algo que aún no está estandarizado.

Responder
CristJian  

gracias JMiur, tambien estaba revisando el CSS cascade que tienes en una entrada, está bastante interesante ese tutorial, he aprendido sobre lo básico y el orden jerárquico que tiene cada elemento del CSS :)

Muchas gracias :D

Responder
JMiur  

Me alegra que sirviera de algo, CristJian :D

Responder
FeddePerez  

Gracias JMiur ya lo he solucionado.
saludos

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR