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!
No hay comentarios:
Publicar un comentario