当前位置：首页 > article >正文

2DGameEngine(webGL)----初始化工程

article 2024/11/6 16:59:46

新建html文件

<!DOCTYPE html> 
<html> 
<head> 
<title>TODO supply a title</title> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head> 
<body> 
    <div style="width: 100%; height: 100%;">
        <canvas id="GLCanvas"></canvas>
    </div>

    <script type="text/javascript">
        // 获取画布元素
        var canvas = document.getElementById("GLCanvas");
        // 更新画布尺寸的函数
        function updateCanvasSize() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight; 
        }
        // 初始化画布尺寸
        updateCanvasSize();
        // 监听窗口大小变化
        window.addEventListener('resize', updateCanvasSize);

        var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
        if (gl !== null) {
            gl.clearColor(0.0, 0.8, 0.0, 1.0); // set the color to be cleared 
            gl.clear(gl.COLOR_BUFFER_BIT); // clear the colors 
        }
    </script>
</body> 
</html>

参考书籍：

《Build Your Own 2D Game Engine and Create Great Web Games: Using HTML5, JavaScript, and WebGL》

未完待续。。。

查看全文

http://www.kler.cn/a/381807.html