O Canvas é um elemento que nos possibilita criar imagens e gráficos dentro do navegador. O Canvas está disponível no HTML5.
Neste post irei mostrar um pouco do básico sobre o Canvas. Vamos lá.
Primeiramente, irei criar um documento HTML.
<html>
</head>
<body>
<canvas width="500" height="500" id="Meu_Canvas"></canvas>
<script>
(function() {
var canvas = document.getElementById('Meu_Canvas'),
context = canvas.getContext('2d');
context.fillStyle = "#FF0000";
context.fillRect(10, 10, 40, 40);
})();
</script>
Explicando...
<canvas width="500" height="500" id="Meu_Canvas"></canvas>
Nesta linha, criamos uma tag Canvas com as propriedades necessárias para inserir o gráfico la dentro.
A propriedade width, define a largura do Canvas, assim como o height defina a altura.
A propriedade id, defina como esse Canvas será chamado.
var canvas = document.getElementById('Meu_Canvas'),
Declaramos uma variável para anexar a tag com id "Meu_Canvas" que declaramos anteriormente.
context = canvas.getContext('2d');
Repare que esta linha está dentro da declaração da variável canvas.
Ela referencia que o objeto ou o gráfico desta variável é um objeto 2D.
context.fillStyle = "#FF0000";
Informa a cor do preenchimento do objeto. (Vermelho)
context.fillRect(10, 10, 40, 40);
Os argumentos da propriedade fillRect definem respectivamente as coordenadas X, Y, Largura e Altura do objeto.
Neste caso, teríamos um retângulo vermelho, na posição X = 10, Y = 10 e com 40px de largura e 40px de altura.
Bem galera, este assunto possui um conteúdo muito extenso, então criarei mais postagens para continuação dele.
Bons estudos e até a próxima!
Neste post irei mostrar um pouco do básico sobre o Canvas. Vamos lá.
Primeiramente, irei criar um documento HTML.
<html>
<head><title>Canvas e HTML5 - Programador Online</title>
</head>
<body>
<canvas width="500" height="500" id="Meu_Canvas"></canvas>
<script>
(function() {
var canvas = document.getElementById('Meu_Canvas'),
context = canvas.getContext('2d');
context.fillStyle = "#FF0000";
context.fillRect(10, 10, 40, 40);
})();
</script>
Explicando...
<canvas width="500" height="500" id="Meu_Canvas"></canvas>
Nesta linha, criamos uma tag Canvas com as propriedades necessárias para inserir o gráfico la dentro.
A propriedade width, define a largura do Canvas, assim como o height defina a altura.
A propriedade id, defina como esse Canvas será chamado.
var canvas = document.getElementById('Meu_Canvas'),
Declaramos uma variável para anexar a tag com id "Meu_Canvas" que declaramos anteriormente.
context = canvas.getContext('2d');
Repare que esta linha está dentro da declaração da variável canvas.
Ela referencia que o objeto ou o gráfico desta variável é um objeto 2D.
context.fillStyle = "#FF0000";
Informa a cor do preenchimento do objeto. (Vermelho)
context.fillRect(10, 10, 40, 40);
Os argumentos da propriedade fillRect definem respectivamente as coordenadas X, Y, Largura e Altura do objeto.
Neste caso, teríamos um retângulo vermelho, na posição X = 10, Y = 10 e com 40px de largura e 40px de altura.
Bem galera, este assunto possui um conteúdo muito extenso, então criarei mais postagens para continuação dele.
Bons estudos e até a próxima!
0 comentários:
Postar um comentário