Para que podamos dibujar circulos en canvas el metodo que utilizaremos es arc(), sus parametros son los siguientes:
arc(x, y, r, ca,fn,ar )
x=posición inicial x
y=posición inicial y
r=radio(tamaño de nuestro circulo);
ca=comienzo del angulo
fn=finalizar angulo
ar=booleano antimanecillas del reloj
Como siempre a veces es mejor la practica que la teoría, así es empecemos a jugar con los círculos en canvas.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#dibuja{
background: #1a1a1a;
}
</style>
</head>
<body>
<canvas id="dibuja" width="855" height="315"></canvas>
<script type="text/javascript">
var canvas=document.getElementById("dibuja");
var ctx=canvas.getContext('2d');
ctx.beginPath();
ctx.arc(100,100,20,0,(Math.PI/180)*360,false);
ctx.fillStyle="white";
ctx.fill();
ctx.lineWidth=5;
ctx.strokeStyle="#4388cc";
ctx.stroke();
</script>
</body>
</html>
Nos quedaría de la siguiente manera:
El color de nuestro circulo blanco viene declarada en nuestro código como:
ctx.fillStyle="white";
El tamaño de nuestro borde azul y color viene expresado de la siguiente forma:
ctx.lineWidth=5;
ctx.strokeStyle="#4388cc";
Si desea ver el funcionamiento de nuestro inicio y final del angulo, colocaremos lo siguiente:
ctx.arc(100,100,20,(Math.PI/180)*90,(Math.PI/180)*360,false);
Veremos que se comienza a dibujar desde 90 grados hasta los 360 grados. Al igual que nuestro ultimo valor booleano "false", si lo cambiamos por "true": nuestra cuenta comenzaría en contra del movimiento de las manecillas del reloj. Este valor booleano es opcional, ya que lo podemos ignorar y que esta siempre sera false.
Por ultimo para realizar los círculos de neon que se presenta al inicio de este tutorial, emplearemos las sobras de canvas de html5 que vienen dadas por las propiedasdes:
shadowOffsetX
shadowOffsetY
shadowBlur
shadowColor
Donde:
ShadowOffsetX. Indica como se desplaza la sombra desde su origen con respecto a x.
ShadowOffsetY . Indica como se desplaza la sombra desde su origen con respecto a y.
ShadowBlur. El difuminado de la sombra.
ShadowColor. El color de la sombra.
Insertamos el siguiente código en nuestro script:
var canvas=document.getElementById("dibuja");
var ctx=canvas.getContext('2d');
incre=85;
for(var i=0;i<10;i++){
s=i*incre;
//primer circulo blanco que simula el efecto neon
//Su sombra es azul
ctx.beginPath();
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowBlur = 40;
ctx.shadowColor = "#4388cc";
ctx.arc(s,100,35,0,(Math.PI/180)*360,true);
ctx.fillStyle="white";
ctx.fill();
ctx.lineWidth=2;
ctx.strokeStyle="#4388cc";
ctx.stroke();
//Segundo circulo azul
//Su sombra es blanca
ctx.beginPath();
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowBlur = 7;
ctx.shadowColor = "white";
ctx.arc(s,100,30,0,(Math.PI/180)*360,true);
ctx.fillStyle="#001535";
ctx.fill();
ctx.lineWidth=2;
ctx.strokeStyle="#4388cc"
ctx.stroke();
//Tercer circulo azul
//Simula un sombra inset(hacia dentro)
ctx.beginPath();
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowBlur = 15;
ctx.shadowColor = "#4388cc";
ctx.arc(s,100,27,0,(Math.PI/180)*360,true);
ctx.fillStyle="#001535";
ctx.fill();
}
Podemos variar el ultimo circulo para tener una sombra por dentro muy difuminada. Como se observa utilizamos un ciclo for para repetir círculos y evitar estar escribiendo más código, haciendo que se incremente nuestros posición de nuestros círculos cada 85px.
No hay comentarios:
Publicar un comentario