Este é o primeiro artigo de uma série que irá apresentar os recursos disponibilizados pela nova tag <canvas> do HTML5. Nesse artigo, veremos
Element can be used to draw graphics via scripting (usually JavaScript). For example, it can be used to draw graphs, make photo compositions or even perform animations. You may (and should) provide alternate content inside the
Um modelo de esquema
A seguir um model minimalista de um esquema que usaremos como ponto de partida para os próximos exemplos dessa série de artigos.
<html> <head> <title>Canvas tutorial</title> <script type="text/javascript"> function draw(){ var canvas = document.getElementById('tutorial'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); } } </script> <style type="text/css"> canvas { border: 1px solid black; } </style> </head> <body onload="draw();"> <canvas id="tutorial" width="150" height="150"></canvas> </body> </html>
O script inclui uma função chamada draw(), que é executada quando a página termina de ser carregada; isso é feito pelo uso do evento load no documento. Essa função, ou uma parecida, pode ser chamada também pelo uso dos métodoswindow.setTimeout()
, window.setInterval()
, ou qualquer outro manipulador de eventos, desde que a página tenha sido carregada completamente.
A seguir o que o modelo acima deve exibir na prática:
Um exemplo simples
Para começar, vamos dar uma olhada em um exemplo simples que desenha dois retângulos que se interceptam, um deles possuindo transparência alpha; Exploraremos como isso funcionada em mais detalhes nos próximo artigos.
<html> <head> <script type="application/javascript"> function draw() { var canvas = document.getElementById("canvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50); } } </script> </head> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> </html>
Esse exemplo será exibido dessa forma
Screenshot | Live sample |
---|---|
![]() |