學習WebGL：第一個代碼

時間 2019-11-12

標籤學習 webgl 第一個代碼简体版

原文原文鏈接

利用canvas和javascript，就能夠在頁面繪製2d圖像，但對於3d的圖像，目前是無能爲力的。要繪製3d圖像，就必須使用WebGL。javascript

以個人理解，WebGL是內嵌在瀏覽器中，在使用時是經過javascript調用瀏覽器提供的WebGL API，而後在canvas繪圖區繪製圖像。剛開始接觸WebGL時，沒有理解這一點，因而以爲代碼怎麼會寫得這麼麻煩，重重複復的寫一堆就爲一個簡單的的功能。html

下面是一個最簡單的WebGL例子java

<!DOCTYPE html>
<html lang='zh-cmn-Hans'>
<head>
<meta charset='utf-8' />
<title>Canvas - WebGL</title>
</head>
<body>
<h1>HTML5 - Canvas - WebGL</h1>
<canvas id='glcanvas' width='500' height='500'></canvas>
<script type="text/javascript">
window.onload = function(){
    init();
}
function init() {
    var canvas, gl;
    canvas = document.getElementById('glcanvas');
    gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl'); //獲取WebGL繪圖上下文
    if (!gl) {
        console.log('不支持WebGL！');
        return;
    }
    gl.clearColor(0.0, 0.0, 0.0, 1.0); //設置背景色
    gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT); //清空繪圖區
}
</script>
</body>
</html>