feat(ch 3): added

2025-11-09 18:03:06 +01:00 · 2024-10-28 13:59:54 +01:00
parent 7ae2986c97
commit f189ff2f1c
117 changed files with 4307 additions and 0 deletions
--- a/Unidad_03_HTML/HTML/100-ejemplo-html5-canvas.html
+++ b/Unidad_03_HTML/HTML/100-ejemplo-html5-canvas.html
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <title>HTML5 Canvas example</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <script>
+      function drawPicture(){
+ 
+        // Primero se recupera el objeto canvas a modificar
+        var canvas = document.getElementById('example');
+ 
+        // Luego se le indicar la forma de trabajar 2D o 3D 
+        var context = canvas.getContext('2d');
+ 
+        // Se comienza a dibujar en el lienzo utilizando objetos  
+        // gráficos
+ 
+        context.fillStyle = "rgb(0,255,0)";
+        context.fillRect (25, 25, 100, 100);
+ 
+        context.fillStyle = "rgba(255,0,0, 0.6)";
+        context.beginPath();
+        context.arc(125,100,50,0,Math.PI*2,true);
+        context.fill();
+ 
+        context.fillStyle = "rgba(0,0,255,0.6)";
+        context.beginPath();
+        context.moveTo(125,100);
+        context.lineTo(175,50);
+        context.lineTo(225,150);
+        context.fill();
+ 
+      }
+    </script>
+    <style type="text/css">
+      canvas { border: 2px solid black; }
+    </style>
+  </head>
+  <body onload="drawPicture();">
+ 
+    <canvas id="example" width="260" height="200">
+    Este texto se muestra en el caso de que el navegador no soporte el elemento "canvas".
+    </canvas>
+ 
+  </body>
+</html>