Código de JavaScript - Dibujar en Javascript con Canvas

Imágen de perfil
Val: 21
Ha disminuido su posición en 6 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Dibujar en Javascript con Canvasgráfica de visualizaciones


JavaScript

Publicado el 9 de Enero del 2020 por Ana Zelideth
316 visualizaciones desde el 9 de Enero del 2020
Buen día les comparto un ejemplo de como hacer círculos y un pino en Javascript con canvas.

arbol-navidad-canvas

Requerimientos

Javascript

1.0

Publicado el 9 de Enero del 2020gráfica de visualizaciones de la versión: 1.0
317 visualizaciones desde el 9 de Enero del 2020
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<html>
 
<head>
 
<title>Especial Navideño Programacionparatodos</title>
 
</head>
 
<body>
 
<p>Una Corona Navideña
 
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
 
Your browser does not support the HTML5 canvas tag.</canvas>
 
<canvas id="myCanvas2" width="300" height="150" style="border:1px solid #d3d3d3;">
 
Your browser does not support the HTML5 canvas tag.</canvas>
 
<script >
 
var c = document.getElementById("myCanvas");
 
var ctx = c.getContext("2d");
 
ctx.beginPath();
 
ctx.arc(100, 75, 50, 0, 2 * Math.PI, false);
 
ctx.fillStyle = 'green';
 
ctx.fill();
 
ctx.stroke();
 
var d = document.getElementById("myCanvas2");
 
var ctx2 = d.getContext("2d");
 
ctx2.arc(220, 75, 50, 0, 2 * Math.PI, false);
 
ctx2.fillStyle = 'red';
 
ctx2.fill();
 
ctx2.stroke();
 
</script>
 
<p>Un pino de navidad
 
<canvas id="myCanvas3" width="350" height="500" style="border:1px solid #d3d3d3;">
 
Your browser does not support the HTML5 canvas tag.</canvas>
 
<script >
 
var e = document.getElementById("myCanvas3");
 
var ctx3 = e.getContext("2d");
 
ctx3.fillStyle = "#FFCC00";
 
ctx3.fillRect(175, 300, 50, 50);
 
ctx3.beginPath();
 
ctx3.fillStyle = "green";
 
ctx3.strokeStyle = 'green';
 
ctx3.lineWidth = 1;
 
ctx3.moveTo(200, 100);
 
ctx3.lineTo(100, 300);
 
ctx3.lineTo(300, 300);
 
ctx3.stroke();
 
ctx3.fill();
 
</script>
 
</body>
 
<html>



Comentarios sobre la versión: 1.0 (0)


No hay comentarios
 

Comentar la versión: 1.0

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/s5804