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

Imágen de perfil

Crear círculos con canvasgráfica de visualizaciones


JavaScript

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

canvas-arc

Versión 1
estrellaestrellaestrellaestrellaestrella(1)

Publicado el 16 de Julio del 2017gráfica de visualizaciones de la versión: Versión 1
115 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 (1)

Imágen de perfil
kip
16 de Julio del 2017
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder

Comentar la versión: Versión 1

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

http://lwp-l.com/s4070