Ejemplos de código y tips de programación

Ejemplo arcos y círculos con canvas

Publicado por coder en 21:11

Un sencillo y pequeño ejemplo para dibujar arcos y círculos con canvas. al igual que el mini tutorial anterior mostraré la estructura básica de html

Obten el elemento canvas mediante su id

var canvas = document.getElementById("lienzo");

var contexto = canvas.getContext("2d");
Dibuja el arco con el método arc()

contexto.arc(canvas.width / 2, canvas.height / 2 , 80, 1 *Math.PI, 1.9 * Math.PI, false);

contexto.stroke();

Resultado

Explicación del método

El método arc() es definido por una sección de la circunferencia de un círculo imaginario, como lo muestra l siguiente imagen:

Expliación de los parámetros
context.arc(centerX,centerY, radius, startingAngle,endingAngle,counterclockwise);

centerX: coordenada X del centro del círculo

centerY: coordenada Y del centro del círculo

radius: distancia del radio

startingAngle: punto inicial del arco

endingAngle: punto final del arco

counterclockwise: coloca true si deseas que se dibuje el arco en contra del movimiento de las manecillas del reloj (por defecto se dibuja en base al movimiento de las manecillas del reloj)

Nota: una revolución (una vuelta al circulo ) es igual a 2π

Ahora para dibujar un círculo, y siguiendo con este ejemplo lo que queremos es que para el punto final se de una vuelta y media (3π) , entonces quedaría

contexto.arc(canvas.width / 2, canvas.height / 2 , 80, 1 *Math.PI, 3 * Math.PI, false);

ó su equivalente

contexto.arc(canvas.width / 2, canvas.height / 2 , 80, 0, 2* Math.PI, false);

Resultado

Si deseas darle color al área, puedes hacerlo con las siguientes líneas:

contexto.fillStyle="green";

contexto.fill();

RECUERDA: si deseas agregar otro circulo con diferentes propiedades (color y ancho de linea) solo debes empezar una nueva ruta con contexto.beginPath();

Intenta dibujar más círculos con diferentes colores, suerte !!

0 comentarios

Etiquetas: beginpatch(), canvas html5, canvas.restore, canvas.save, dibujar arcos y circulos con canvas html5, ejemplo canvas

TOP

Dibujando lineas con canvas Html5

Publicado por coder en 14:48

En este sencillo ejercicio te mostraré cómo dibujar lineas con canvas, además verás los diferentes tipos de cubiertas o "tapas" de lineas.

Empezaremos con la estructura básica de un documento html el cual lo nombraremos ejemplo.html (qué original :D ), y dentro de la etiqueta <body> colocaremos una etiqueta canvas, le daremos un id para luego obtener ese elemento con javascript, y así luego dibujar las lineas.

<!DOCTYPE HTML>
<html>
<head>
<title>Ejemplo 1. Dibujar lineas</title>
</head>
<body>
<canvas id="lienzo" width="600" height="400" style="border-width:1px;
border-style:solid; border-color:black;">
</canvas>
</body>
</html>

Ahora bien, empieza la parte de javascript, antes que nada asegúrate de hacer referencia a tu script despues de haber cargado la página, o mejor aún dibuja las lineas dentro de una función al cargar la "página" con window.onload. Esto lo agregarás dentro de las etiquetas <head></head> , no es del todo obligatorio pero es recomendable :).

window.onload = function(){
//obtienes el elemento canvas por su Id
var canvas = document.getElementById("lienzo");
//obtienes el contexto
var contexto = canvas.getContext("2d");
contexto.moveTo(50, 10);
// lineTo dibuja una recta hasta las coordenadas que se le indique (X,Y)
// es importante primero haber ubicado el origen con la sentencia anterior moveTo
contexto.lineTo(50, 200);
// a pesar que la recta se "dibuje" no será visible a menos que uses el método stroke
contexto.stroke();

};

Ahora bien también puedes indicar el color de la línea, el ancho y el tipo de "cubierta" ( a tope, redondo, y cuadrado.) . Así que coloca estas lineas de código antes de llamar al método stroke()

// ancho de 10 pixeles
contexto.lineWidth = 10;
// color
contexto.strokeStyle = "green";

//y para la cubierta o tapa de la linea
contexto.lineCap="round";

Como habrás notado la línea dibujada con una cubierta (la cubierta por defecto es butt) round es un poco más larga de lo normal, eso es por este tipo de cubierta y "square" agregan el ancho de la línea (10px) a la longitud de la linea (5px al principio y 5px al final).

Bueno espero espero haber sido claro :D juega con las coordenadas e intenta dibujar algo con más lineas y colores, suerte !!