Ir al contenido principal

Canvas y SVG

Canvas y SVG

Arriba: Ejemplo con Canvas.
Abajo: Ejemplo con SVG.

Fuente para leer conceptos:
Canvas | W3Schools
SVG | W3Schools

Bien., Armemos una HTML WebPage de Ta Te Ti con Canvas y otro con SVG. Ahí va el código:

<!DOCTYPE html>
<html>
	<head>
		<title>Tic Tac Toe</title>
	</head>
	<body>
		<h1>Tic Tac Toe</h1>
		<h2>Made with HTML5!</h2>
		<hr />
		<br />
		<h3>It's a Tic Tac Toe drawing made with Canvas and Filled with JavaScript.</h3>
		<br />
		<table>
		<!-- La parte de Canvas... -->

		<tbody>
			<tr>
				<td>
					<canvas id="id11" width="100" height="100" style="border:1px solid #d3d3d3;">
					Your browser does not support the HTML5 canvas tag.</canvas>
				</td>
				<td>
					<canvas id="id12" width="100" height="100" style="border:1px solid #d3d3d3;">
					Your browser does not support the HTML5 canvas tag.</canvas>
				</td>
				<td>
					<canvas id="id13" width="100" height="100" style="border:1px solid #d3d3d3;">
					Your browser does not support the HTML5 canvas tag.</canvas>
				</td>
			</tr>
			<tr>
				<td>
					<canvas id="id21" width="100" height="100" style="border:1px solid #d3d3d3;">
					Your browser does not support the HTML5 canvas tag.</canvas>
				</td>
				<td>
					<canvas id="id22" width="100" height="100" style="border:1px solid #d3d3d3;">
					Your browser does not support the HTML5 canvas tag.</canvas>
				</td>
				<td>
					<canvas id="id23" width="100" height="100" style="border:1px solid #d3d3d3;">
					Your browser does not support the HTML5 canvas tag.</canvas>
				</td>
			</tr>
			<tr>
				<td>
					<canvas id="id31" width="100" height="100" style="border:1px solid #d3d3d3;">
					Your browser does not support the HTML5 canvas tag.</canvas>
				</td>
				<td>
					<canvas id="id32" width="100" height="100" style="border:1px solid #d3d3d3;">
					Your browser does not support the HTML5 canvas tag.</canvas>
				</td>
				<td>
					<canvas id="id33" width="100" height="100" style="border:1px solid #d3d3d3;">
					Your browser does not support the HTML5 canvas tag.</canvas>
				</td>
			</tr>
		</tbody>
		</table>
		<br />
		<hr />
		<br />
		<h3>It's a Tic Tac Toe drawing made with SVG.</h3>
		<br />
		<table>
		<!-- La parte de SVG... -->

		<tbody>
			<tr>
				<td>
					<svg width="100" height="100" style="border:1px solid #d3d3d3;">
                    <polygon points="0,0 100,100 100,0 0,100" stroke="black" stroke-width="1" fill="none"/>
                    Sorry, your browser does not support inline SVG.
                    </svg>
				</td>
				<td>
					<svg width="100" height="100" style="border:1px solid #d3d3d3;">
                    <circle cx="50" cy="50" r="48" stroke="black" stroke-width="1" fill="none" />
                    Sorry, your browser does not support inline SVG.
                    </svg>
				</td>
				<td>
					<svg width="100" height="100" style="border:1px solid #d3d3d3;">
                    <polygon points="0,0 100,100 100,0 0,100" stroke="black" stroke-width="1" fill="none"/>
                    Sorry, your browser does not support inline SVG.
                    </svg>
				</td>
			</tr>
			<tr>
				<td>
					<svg width="100" height="100" style="border:1px solid #d3d3d3;">
                    <circle cx="50" cy="50" r="48" stroke="black" stroke-width="1" fill="none" />
                    Sorry, your browser does not support inline SVG.
                    </svg>
				</td>
				<td>
					<svg width="100" height="100" style="border:1px solid #d3d3d3;">
                    <polygon points="0,0 100,100 100,0 0,100" stroke="black" stroke-width="1" fill="none"/>
                    Sorry, your browser does not support inline SVG.
                    </svg>
				</td>
				<td>
					<svg width="100" height="100" style="border:1px solid #d3d3d3;">
                    <circle cx="50" cy="50" r="48" stroke="black" stroke-width="1" fill="none" />
                    Sorry, your browser does not support inline SVG.
                    </svg>
				</td>
			</tr>
			<tr>
				<td>
					<svg width="100" height="100" style="border:1px solid #d3d3d3;">
                    <polygon points="0,0 100,100 100,0 0,100" stroke="black" stroke-width="1" fill="none"/>
                    Sorry, your browser does not support inline SVG.
                    </svg>
				</td>
				<td>
					<svg width="100" height="100" style="border:1px solid #d3d3d3;">
                    <circle cx="50" cy="50" r="48" stroke="black" stroke-width="1" fill="none" />
                    Sorry, your browser does not support inline SVG.
                    </svg>
				</td>
				<td>
					<svg width="100" height="100" style="border:1px solid #d3d3d3;">
                    <polygon points="0,0 100,100 100,0 0,100" stroke="black" stroke-width="1" fill="none"/>
                    Sorry, your browser does not support inline SVG.
                    </svg>
				</td>
			</tr>
		</tbody>
		</table>
		
		<script>
			// JavaScript para llenar los espacios Canvas...

			function setCircle(c) {
			  var ctx = c.getContext("2d");
			  ctx.beginPath();
			  ctx.arc(50,50,48,0,2*Math.PI);
			  ctx.stroke();
			}

			function setCross(c) {
			  var ctx = c.getContext("2d");
			  ctx.moveTo(0,0);
			  ctx.lineTo(100,100);
			  ctx.stroke();
			  
			  var ctx2 = c.getContext("2d");
			  ctx2.moveTo(0,100);
			  ctx2.lineTo(100,0);
			  ctx2.stroke();
			}

			var c = document.getElementById("id11");
			setCross(c);

			c = document.getElementById("id12");
			setCircle(c);

			c = document.getElementById("id13");
			setCross(c);

			c = document.getElementById("id21");
			setCircle(c);

			c = document.getElementById("id22");
			setCross(c);

			c = document.getElementById("id23");
			setCircle(c);

			c = document.getElementById("id31");
			setCross(c);

			c = document.getElementById("id32");
			setCircle(c);

			c = document.getElementById("id33");
			setCross(c);
		</script>
	</body>
</html>

Hice algunas anotaciones en el código...
Espero que les sea de utilidad!
Etiquetas:

Comentarios

Publicar un comentario

Entradas populares de este blog

Usando ASP.NET MVC 2 con VS2008

Usando ASP.NET MVC 2 con VS2008 Creando una Aplicación Web ASP.NET MVC 2 con VS2008 Usando .NET Framework 3.5 Al crear el proyecto, vemos un entorno similar a la siguiente imagen: Configurando el DBConnectionString desde el Web.Config Con el  ConnectionString configurado (por defecto debería apuntar al App_Data del proyecto con el esquema de tablas del modelo, guardado como  .mdf ; o a la base que desee, teniendo en cuenta el modelo DB necesario), debería estar andando. NOTA: si genera un error de navegación, apuntar a la URL local raíz con el puerto generado por el Debug . NOTA 2: Al implementar la Solución, tengan en cuenta de subir el App_Data si usan ese DataSource , o referenciar desde el  ConnectionString . Una vez corriendo la Aplicación Web, podemos armar una Vista mas en la carpeta Views > Account del projecto. La podemos usar una vez que el Usuario ingrese al Sistema como Repositorio de Documentos. La llamamos  ViewIntranet.aspx...
2 comentarios
Leer más

Probando NodeJS

Probando NodeJS Probando NodeJS sobre editores Online. Node.js® es un entorno de ejecución para JavaScript construido con el motor de JavaScript V8 de Chrome; según Google, Node.js es un entorno en tiempo de ejecución multiplataforma, de código abierto, para la capa del servidor basado en el lenguaje de programación ECMAScript, asíncrono, con I/O de datos en una arquitectura orientada a eventos y basado en el motor V8 de Google. Documentación de W3Schools: https://www.w3schools.com/nodejs/nodejs_intro.asp Algunos editores NodeJS: https://repl.it/repls/SpryChiefGenericsoftware https://www.katacoda.com/courses/nodejs/playground Empecemos con el código! Tengamos en cuenta que guardamos los archivos como <nombre_archivo>.js , y luego corremos la instrucción node <nombre_archivo>.js  para que funcione correctamente, además de usar el puerto 8080  (lo puedes cambiar siempre y cuando uses correctamente el enlace con el puerto cambiado). Vamos...
Publicar un comentario
Leer más