Hoje encontrei em um blog um exemplo muito bacana sobre como desenhar utilizando canvas:
http://www.tidbits.com.br/desenhando-com-a-tag-canvas-em-html
Este é um exemplo:
<html>
<head>
<meta charset="UTF-8">
<title>Desenhando com a tag canvas em HTML5</title>
<style>
#canvas
{
width:400px;
height:400px;
position:absolute;
top:50px; left:50%;
margin-left:-200px;
border:2px solid #000;
}
</style>
</head>
<body>
<canvas id="canvas" class="canvas" width="400" height="400">
Seu browser não suporta canvas, é hora de trocar!.
</canvas>
<script>
var Draw = {
obj : document.getElementById('canvas'),
contexto : document.getElementById('canvas').getContext("2d"),
_init:function(){
Draw.obj.onmousemove = Draw._over;
Draw.obj.onmousedown = Draw._ativa;
Draw.obj.onmouseup = Draw._inativa;
Draw.obj.onselectstart = function () { return false; };
},
_over:function(e){
if(!Draw.ativo) return;
Draw.contexto.beginPath();
Draw.contexto.lineTo(Draw.x,Draw.y);
Draw.contexto.lineTo(e.layerX, e.layerY);
Draw.contexto.stroke();
Draw.contexto.closePath();
Draw.x = e.layerX;
Draw.y = e.layerY;
},
_ativa:function(e){
Draw.ativo = true;
Draw.x = e.layerX;
Draw.y = e.layerY;
},
_inativa:function(){
Draw.ativo = false;
}
}
Draw._init();
</script>
</body>
</html>
Nenhum comentário:
Postar um comentário