|
Agora vamos desenhar um par de retângulos, um verde e outro amarelo para mostrar como fazer uma cor semitransparente.
A explicação com realizar está no código:
<html>
<head>
<title>Canvas segundo exemplo</title>
<script>
//Recebe um identificador do elemento canvas e carrega o canvas
//Devolve o contexto do canvas ou FALSE se não pode conseguir
function cargaContextoCanvas(idCanvas){
var elemento = document.getElementById(idCanvas);
if(elemento && elemento.getContext){
var contexto = elemento.getContext('2d');
if(contexto){
return contexto;
}
}
return FALSE;
}
window.onload = function(){
//Recebemos o elemento canvas
var contexto = cargaContextoCanvas('meucanvas');
if(contexto){
//Se tenho o contexto
//mudo a cor de desenho a verde
contexto.fillStyle = '#458B00';
//desenho um retângulo verde
contexto.fillRect(10,10,50,50);
//mudo a cor a amarelo com um pouco de transparência
contexto.fillStyle = 'rgba(255,255,0,0.7)';
//pinto um retângulo amarelo semitransparente
contexto.fillRect(35,35,50,50);
}
}
</script>
</head>
<body>
<canvas id="meucanvas" width="100" height="100">
Seu navegador não suporta canvas.
</canvas>
</body>
</html>
<head>
<title>Canvas segundo exemplo</title>
<script>
//Recebe um identificador do elemento canvas e carrega o canvas
//Devolve o contexto do canvas ou FALSE se não pode conseguir
function cargaContextoCanvas(idCanvas){
var elemento = document.getElementById(idCanvas);
if(elemento && elemento.getContext){
var contexto = elemento.getContext('2d');
if(contexto){
return contexto;
}
}
return FALSE;
}
window.onload = function(){
//Recebemos o elemento canvas
var contexto = cargaContextoCanvas('meucanvas');
if(contexto){
//Se tenho o contexto
//mudo a cor de desenho a verde
contexto.fillStyle = '#458B00';
//desenho um retângulo verde
contexto.fillRect(10,10,50,50);
//mudo a cor a amarelo com um pouco de transparência
contexto.fillStyle = 'rgba(255,255,0,0.7)';
//pinto um retângulo amarelo semitransparente
contexto.fillRect(35,35,50,50);
}
}
</script>
</head>
<body>
<canvas id="meucanvas" width="100" height="100">
Seu navegador não suporta canvas.
</canvas>
</body>
</html>
Veja Mais:
- Criar um retangulo sobre outro transparente com canvas no HTML5- Coordenadas do Canvas no HTML5
- Elemento canvas em HTML5
- Atributo required no HTML5
- Formulário de contato pronto com HTML5
- Como usar Placeholder no HTML5
- Validar CEP com HTML5 usando Pattern
- Colocar vídeo na página com HTML5
- Colocar áudio na página com HTML5
- Elemento Áudio e Vídeo em HTML5
- Criar Formulários em HTML5
- Introdução ao HTML5
- Estrutura de um documento html 5
- Layout em HTML5
0 comentários:
Postar um comentário