sin programar: Crear gráficos con CANVAS

7/10/11

Crear gráficos con CANVAS - II

Las funciones básicas para dibujar formas son: beginPath() - Inicio de nueva figura
closePath() - Cerrar figura
stroke() - Dibujar contorno
fill() - Dibujar figura con relleno. Cuando se utiliza no es necesario cerrar la figura
moveTo(x, y) - Punto de inicio de dibujo o salto en el dibujo
lineTo(x,y) - Linea recta
arc(x, y, radio, angulo-inicio, angulo-fin, sentido-giro[true o false]) - Arco
quadraticCurveTo(cx, cy, x, y) - Curva cuadrática ("cx" y "cy" son las posiciones x-y de punto de control de la curva)
bezierCurveTo(cx1, cy1, cx2, cy2, x, y) - Curva beizer ("cx1", "cy1", "cx2" y "cx2" son las posiciones x-y de los puntos de control 1 y 2)

Ejemplo triangulo:


<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
    function dibujo(){
    var canvas = document.getElementById("dibujo").getContext('2d');
    
    //Contorno triangulo
    canvas.beginPath();
    canvas.moveTo(100,50);
    canvas.lineTo(150,150);
    canvas.lineTo(50,150);
    canvas.lineTo(100,50);
    canvas.stroke();
    
    //Triangulo relleno
    canvas.beginPath();
    canvas.moveTo(250,50);
    canvas.lineTo(350,200);
    canvas.lineTo(150,200);
    canvas.lineTo(250,50);
    canvas.fill();
    }

</script>
</head>
<body onLoad="dibujo()"> 
	<canvas id="dibujo" width="500" height="300"></canvas>
</body>
</html>

Resultado: