 |
|||||
 Planilha Web - Planilhas e Calculadoras online para estudantes e profissionais de Engenharia Civil, Engenharia Elétrica e Engenharia Mecânica. |
|||||
|
|||||
Você está aqui: WebGL (Web Graphics Library) ::: Dicas de Estudo e Anotações ::: Passos Iniciais |
Como retornar o contexto de desenho do WebGL usando o método getContext() do objeto Canvas do HTML5Quantidade de visualizações: 914 vezes |
|
Esta é, claro, uma dica para iniciantes em WebGL + HTML5, e o motivo de eu estar documentando ela aqui é para poupar aos iniciantes uma dor de cabeça imensa tentando entender onde e como iniciar a execução de seus códigos WebGL. Assim, o primeiro procedimento que temos que fazer é entender como adquirir o contexto de desenho do WebGL a partir do Canvas do HTML5. Uma vez adquirido o contexto e verificado o seu correto funcionamento, os demais passos serão, com certeza, mais fáceis. No momento que escrevo esta dica, o objeto Canvas do HTML5 nos fornece duas formas a partir das quais podemos obter o contexto de desenho: "2d" e "webgl". O valor "webgl" pode ser trocado por "experimental-webgl" de forma a obter recursos adicionais, mas pode variar de um browser para outro. Assim, na dúvida, vamos ficar com o valor "webgl" mesmo. Então, sem mais enrolação, para obter o contexto de desenho do WebGL, só precisamos chamar o método getContext() do objeto Canvas do HTML5, fornecendo o valor "webgl" como argumento. Veja:
<!doctype html>
<html>
<head>
<title>Estudos WebGL</title>
</head>
<body>
<canvas id="tela" width="400px" height="300px"
style="background-color: red">
Seu navegador não suporta o objeto Canvas do HTML5
</canvas>
<script type="text/javascript">
var webGL = null; // referência ao WebGL
// função que inicializa e testa o WebGL
function inicializarWebGL(){
// obtemos a referência ao Canvas
var canvas = document.getElementById("tela");
// e tentamos obter o contexto de desenho WebGL
try{
// recebe o contexto de desenho
webGL = canvas.getContext("webgl");
// vamos definir a cor de fundo padrão
webGL.clearColor(0.0, 1.0, 0.0, 1.0);
// vamos aplicar a cor
webGL.clear(webGL.COLOR_BUFFER_BIT);
}
catch(e){
window.alert("Não consegui obter o contexto de desenho WebGL");
}
}
// vamos chamar tudo quando o documento HTML estiver carregado
window.onload = inicializarWebGL;
</script>
</body>
</html>
Salve este código como estudos_webgl.html e abra-o no seu navegador. Se seu browser oferecer suporte ao WebGL e tudo correr bem, você verá um objeto Canvas com seu contexto de desenho pintado de verde (ou vermelho, em caso de erro). |
 Link para compartilhar na Internet ou com seus amigos: |
Veja mais Dicas e truques de WebGL (Web Graphics Library) |
Dicas e truques de outras linguagens |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
