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

Imágen de perfil

Crear círculos con canvasgráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(2)
Publicado el 16 de Julio del 2017 por xve
1.279 visualizaciones desde el 16 de Julio del 2017. Una media de 28 por semana
Con este código de ejemplo, se muestra como realizar circunferencias y arcos de diferentes longitudes con canvas.

canvas-arc

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
1.280 visualizaciones desde el 16 de Julio del 2017. Una media de 28 por semana
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
kip
16 de Julio del 2017
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
Imágen de perfil
miguel
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
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s4070  
Revisar política de publicidad