Funciona en:
En este tutorial vamos a explicar como crear un dibujo simple con el tag Canvas de HTML 5. Este tutorial funciona en casi todos los navegadores menos en Internet Explorer. Lo primero que aremos crear el tag de Canvas en la parte de web donde queramos el dibujo, dentro del body. Para insertar un Canvas sería asi de simple:
<body onLoad="dibujo();"> <canvas id="canvas" width="200" height="200"> <p>Su navegador no soporta HTML5</p> </canvas> </body>
Como ves en el body hemos añadido un onLoad eso ara que cuando la pagina web haya cargado ejecute la función "dibujo()" (a continuación veremos que contendrá esa función.) Como hemos visto en el codigo crear un canvas es muy simple, solo hay que abrir el tag y dar las medidas. El mensaje que pongamos en el Canvas será el mensaje que se mostrará en el navegador que no soporte Canvas.
El canvas ya estarí acabado ahora tendriamos que crear en el head la función dibujo() entre un tag de javascript:
<script type="application/x-javascript"> ... </script>El codigo de la función dibujo() sería el siguiente:
function dibujo() { /* Crearemos variable canvas apuntando al canvas creado */ var canvas = document.getElementById("canvas"); if (canvas.getContext) { /* damos el valo de 2D */ var ctx = canvas.getContext("2d"); /* Damos color al fillStyle con rgb(indicamos los colores con los numeros) */ ctx.fillStyle = "rgb(200,0,0)"; /* Con fillRect crearemos un rectangulo los numeros correscponden: */ /* los 2 primeros a las coordenadas y los otros tamaño (x,y,ancho,alto) */ ctx.fillRect (10, 10, 55, 50); /* Damos color igual que en el anterios pero esta vez */ /*"rgba" añadiendo un numero más */ /*que en este caso serrá la transparéncia */ ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; /* Creamos el segundo rectagulo este esta vez con transparéncias. */ ctx.fillRect (30, 30, 55, 50); } }
El resultado de este tutorial sería así:
Me sorprende que no haya ningún comentario.
ResponderEliminarCreo que es un tutorial excelente.
Muchas gracias.
Sergio.
Muchas gracias por comentar!
ResponderEliminarMuy bueno, clarito clarito, y lo mejor de todo en ESPAÑOL...
ResponderEliminarMuchas gracias
Samuel
www.samuelgonzalez.info
Excelente!!! de verdad es muy bueno muchas gracias por explicar a detalle :)
ResponderEliminarHola,
ResponderEliminarel ejemplo tal cual no me funcionaba en ningún navegador, he comprado que es por el tag de Javascript:
type="application/x-javascript"
Lo he puesto así, y ya funciona:
type="text/javascript"
Saludos!
Que raro ya lo vi con este mismo codigo, pero no importa, muchas gracias :D
ResponderEliminargracias es exelente ahora a empezar a dibujar por medio de canvas!!!
ResponderEliminarGracias por el tutorial, acabo de empezar a investigar con esto y se ve muy interesante.
ResponderEliminarSaludos
hola...estoy interesado en hacer una pagina web desde 0 y estos ejemplos me dan bastante duro pero seguire aprendiendo muchas gracias por los aportes
ResponderEliminarImposible un tutorial mas claro.
ResponderEliminarFelicitaciones, muy bueno el Tuto.
Saludos!
Muchas gracias!
Eliminarexelente acotacion... muchachos... muy util....
ResponderEliminarHola, muy claro el tutorial, pregunta, como podría dibujar una firma en un canbas que seencuentra en una ventana modal? Saludos
ResponderEliminar