domingo, 17 de junio de 2012

Ejemplo Canvas en HTML5

Un ejemplo basico de un canvas en html5, esto se escribe en el editor que se este usando, o si no en un block de notas y se guarda como html


<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<script type="application/javascript" src="game.js"></script>
</head>
<body>
<h1>Ejemplo Canvas</h1>
<p><canvas id="canvas" width="350" height="200" style="border:1px solid #000">
Canvas not supported by your browser.
</canvas></p>
</body>
</html>


En esta linea se está llamando el Javascript

<script type="application/javascript" src="game.js"></script>


Este sería el javascript


window.addEventListener('load',init,false);
var canvas=null,ctx=null;
function init(){
 canvas=document.getElementById('canvas');
 canvas.style.background='#999';
 ctx=canvas.getContext('2d');
 paint(ctx);
}
function paint(ctx){
 ctx.fillStyle='#0f0';
 ctx.fillRect(60,60,100,70);
}

No hay comentarios:

Publicar un comentario