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

Pivot y Unpivot en MSSQL

Pivot y Unpivot en MSSQL Armando Query's con Pivot y Unpivot en MSSQL (SQLServer2008 R2) Tuturiales de SQL de W3Schools:  SQL| W3Schools  Creamos una Base de Datos, con un esquema simple de una tabla: USE [Nombre_Base_Datos]; GO -- Create the table and insert values as portrayed in the previous example. CREATE TABLE pvt (VendorID int, Emp1 int, Emp2 int,     Emp3 int, Emp4 int, Emp5 int); GO Luego insertamos algunos datos: INSERT INTO pvt VALUES (1,4,3,5,4,4); INSERT INTO pvt VALUES (2,4,1,5,5,5); INSERT INTO pvt VALUES (3,4,3,5,4,4); INSERT INTO pvt VALUES (4,4,2,5,5,4); INSERT INTO pvt VALUES (5,5,1,5,5,5); GO Ahora probamos Pivot (varias SubQuery's con Union) en una Query: -- And a simple union pivot for each column... SELECT 'Orders N° 1' AS Orders_Sorted_By_pvt, [1], [2], [3], [4], [5] FROM (SELECT VendorID, Emp1 FROM pvt) AS SourceTable PIVOT ( AVG(Emp1) FOR VendorID IN ([1], [2], [3], [4], [5]) ) AS PivotTable UNION SEL...
Publicar un comentario
Leer más