Iniciando com canvas - Desenhando um círculo

Publicado em 29 de Mar 2013.

Olá pessoal, iremos hoje iniciar a trabalhar com canvas um tag que permite desenhar, a tag está integrada na nova versão do html5, com ela você poderá renderizar elementos 2D, dinamicamente usando funções matemáticas e muito mais.

HTML

Para começar iremos começar com nossa página html básica.

circulo.html

<!DOCTYPE html>
<html>
    <head>
        <title>Círculo</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <div>TODO write content</div>
    </body>
</html>

Agora vamos criar nossa tag canvas, deletando a div.

<!DOCTYPE html>
<html>
    <head>
        <title>Círculo</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <canvas id="circulo" width="100" height="100"></canvas>
    </body>
</html>

Criado no javascript para criar o círculo

<script type="text/javascript">

    var canvas;
    var contexto;

    canvas = document.getElementById("circulo");
    contexto = canvas.getContext("2d");       

    contexto.beginPath();
    contexto.fillStyle = "blue";               
    contexto.arc(0,0,10,0,2 * Math.PI,true);
    contexto.fill();
    contexto.lineWidth = 2;
    contexto.stroleStyle = "#FFFFFF";
    contexto.stroke();
    contexto.closePath();

</script>