HTML5: pizarra con canvas y JavaScript

HTML5: pizarra con canvas y JavaScript

Etiquetas: canvas strokeStyle beginPath stroke lineTo

Una de las novedades de HTML5 es la etiqueta <canvas>. Esta etiqueta permite crear dinámicamente formas y elementos 2d. En este ejemplo, crearemos una pizarra sencilla con esta nueva etiqueta y algo de JavaScript.

La sintaxis para crear un objeto canvas, es la siguiente:

  1.  
  2.         <canvas id="pizarra" width="300px" height="200px"></canvas>

  3.  

Como vemos, especificamos un ancho, un alto, y un id ("pizarra") que utilizaremos para manipular el canvas desde JavaScript. El código JavaScript comentado sería este:

Actionscript 2.0: Como dibujar un círculo

Actionscript 2.0: Como dibujar un círculo

Etiquetas: lineTo lineStyle beginFill

Actionscript 2.0: Como dibujar un círculo

En la API de dibujo de Actionscript 2.0 no existe ninguna función para dibujar directamente un círculo (en Actionscript 3.0 tenemos drawCircle()). Sin embargo, podemos dibujar círculos con dos métodos diferentes.

El primero es el más intuitivo. Se trata de unir diversos puntos con lineTo() para formar el círculo. Por ejemplo podemos utilizar una función como esta para crear un círculo:

  1. function circuloLine(px, py, radio, color, alfa) {
  2.   lineStyle(1,color,alfa);
  3.   beginFill(color,alfa);
  4.   moveTo(px+radio,py);
  5.   for (grados=0; grados<=360; grados++) {
  6.   x = radio*Math.cos(Math.PI/180*grados);
  7.   y = radio*Math.sin(Math.PI/180*grados);
  8.   lineTo(px+x, py+y);
  9.   }
  10.   endFill();
  11. }

Como se puede ver en la función son matemáticas básicas. Unimos 360 puntos, calculando las coordenadas con seno y coseno, y forman un círculo. En realidad es un polígono de 360 lados, pero los lados no se ven planos porque son muy pequeños. Para figuras muy grandes, se podría mejorar la función utilizando curveTo() en lugar de lineTo():

  1. function circuloCurve(px, py, radio, color, alfa) {
  2. 	lineStyle(1,color,alfa);
  3. 	beginFill(color,alfa);
  4. 	moveTo(px+radio,py);
  5. 	for (grados=0; grados<=360; grados++) {
  6. 		x = radio*Math.cos(Math.PI/180*grados);
  7. 		y = radio*Math.sin(Math.PI/180*grados);
  8. 		curveTo(px+x,py+y,px+x,py+y);
  9. 	}
  10. 	endFill();
  11. }

La función es la misma, pero en vez de unir los puntos por rectas, los unimos por curvas.

La tercera opción que conozco para dibujar un círculo, es la más rápida e ingeniosa. Se trata de dibujar una linea muy pequeña, pero con un grosor igual al diametro que buscamos. Sería como "dibujar un punto muy gordo". El resultado es el más exacto de los 3, además del más eficiente.

  1. function circuloPunto(px, py, radio, color, alpha){
  2.    lineStyle(radio*2, color,alpha);
  3.    moveTo(px,py); 
  4.    lineTo(px,py + 0.15);
  5. }