Código de JavaScript - Crear círculos con canvas

Versión 1
estrellaestrellaestrellaestrellaestrella(2)

Actualizado el 22 de Octubre del 2017 (Publicado el 16 de Julio del 2017)gráfica de visualizaciones de la versión: Versión 1
5.050 visualizaciones desde el 16 de Julio del 2017
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

la función arc de canvas funciona así:
1
contexto.arc(x,y,radius,sAngle,eAngle,counterclockwise);

x: Coordenada x del centro del circulo
y: Coordenada y del centro del circulo
radius: Radio del circulo desde x,y
start angle: inicio del angulo en radianes (0 es a las 3 en punto en el arco)
end angle: final del angulo en radianes
counterclockwise: Determina la dirección de dibujo. false (default) dibuja en la dirección de las agujas del reloj.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html>
<head>
 
<style>
.canvas {
	width:200px;
	height:200px;
	background-color:#efefef;
}
</style>
 
<script>
window.onload = function(){
	var canvas = document.getElementById("canvas1");
	var contexto = canvas.getContext("2d");
	canvas.width=200;
	canvas.height=200;
	contexto.lineWidth = 2;
	contexto.strokeStyle = "blue";
	for(var i=10;i<=90;i+=10)
	{
		contexto.beginPath();
		contexto.arc(canvas.width/2, canvas.height/2, i, 0, 2*Math.PI, true);
		contexto.stroke();
	}
 
	var canvas = document.getElementById("canvas2");
	var contexto = canvas.getContext("2d");
	canvas.width=200;
	canvas.height=200;
	contexto.lineWidth = 2;
	contexto.strokeStyle = "red";
	var inicio=0.25
	for(var i=10;i<=90;i+=10)
	{
		contexto.beginPath();
		contexto.arc(canvas.width/2, canvas.height/2, i, 0, inicio*Math.PI, false);
		contexto.stroke();
		inicio=inicio+0.25;
	}
};
</script>
 
</head>
 
<body>
 
<canvas id="canvas1" class="canvas"></canvas>
 
<canvas id="canvas2" class="canvas"></canvas>
 
</body>
</html>



Comentarios sobre la versión: Versión 1 (2)

Imágen de perfil
16 de Julio del 2017
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
Imágen de perfil
22 de Octubre del 2017
estrellaestrellaestrellaestrellaestrella
Muy bueno amigo, seguir asi, sois buena muestra para los que nos estamos iniciando.
Un saludo
Responder

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s4070