創建WebGL環境不難，本篇講下怎麼創建一個 WebGL的環境：
1. 在頁面裏動態創建一個canvas:
var webglcanvas = null;
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
webglcanvas = document.createElement('canvas'),
container.appendChild(webglcanvas);
}2. 從canvas中獲取WebGL Context
var gl = null;
function initGL () {
try {
gl = webglcanvas.getContext("experimental-webgl");
if ( null == gl ) {
throw 'Error creating WebGL context.';
}
}
catch (error) {
console.log(error);
}
}function updateFrame () {
// Clear the color buffer
gl.clearColor(0.4, 0.4, 0.7, 1);
gl.clear ( gl.COLOR_BUFFER_BIT );
// 設置一個Timer
setTimeout( function(){updateFrame()}, 20);
}4. 初始化並開始渲染
init();
initGL();
updateFrame();
<!doctype html>
<html lang="en">
<head>
<title>webgl - init webgl</title>
</head>
<body>
<script>
var width = window.innerWidth;
var height= window.innerHeight;
var webglcanvas = null;
var gl = null;
function initGL () {
try {
gl = webglcanvas.getContext("experimental-webgl");
if ( null == gl ) {
throw 'Error creating WebGL context.';
}
}
catch (error) {
console.log(error);
}
}
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
webglcanvas = document.createElement('canvas'),
container.appendChild(webglcanvas);
}
function updateFrame () {
// Set the viewport
gl.viewport ( 0, 0, width, height );
// Clear the color buffer
gl.clearColor(0.4, 0.4, 0.7, 1);
gl.clear ( gl.COLOR_BUFFER_BIT );
setTimeout(
function(){updateFrame()},
20);
}
init();
initGL();
updateFrame();
</script>
</body>
</html>