码迷,mamicode.com
首页 > Web开发 > 详细

三、在Canvas中使用WebGL

时间:2014-12-23 23:57:15      阅读:852      评论:0      收藏:0      [点我收藏+]

标签:

  上一篇介绍了如何在<canvas>标签中绘制2d图形;接下来,我们看看如何在<canvas>中使用WebGL来绘制3d图形。

  我们开始编写一个最短的WebGL程序:Hello WebGL;这个程序的功能非常简单,使用指定颜色清空<canvas>标签的绘图区下图显示了程序运行的效果,清空(用黑色)了<canvas>定义的矩形区域。

技术分享

 

  我们来看下代码,先看一下Hello WebGL.html:

技术分享
 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="Generator" content="EditPlus®">
 6     <meta name="Author" content="Mirror">
 7     <meta name="Keywords" content="">
 8     <meta name="Description" content="">
 9     <title>Document</title>
10     <!--《WebGL编程指南》的作者为读者编写的WebGL辅助函数-->
11     <script src="lib/webgl-utils.js"></script>
12     <script src="lib/webgl-debug.js"></script>
13     <script src="lib/cuon-utils.js"></script>
14     <script>
15         function main() {
16             //获取<canvas>标签。
17             var canvas = document.getElementById("myCanvas");
18             //获取WebGL绘图上下文。
19             var gl = getWebGLContext(canvas);
20             //如果浏览器不支持WebGL则提示错误。
21             if (!gl) {
22                 console.log("Failed to get the rendering context for WebGL.");
23                 return;
24             }
25             //指定清除颜色缓冲区的颜色。
26             gl.clearColor(0,0,0,1);
27             //用指定的颜色清除颜色缓冲区。
28             gl.clear(gl.COLOR_BUFFER_BIT);
29         }
30     </script>
31 </head>
32 <body onload="main()">
33     <!--定义<canvas>标签,通过width属性和height属性规定它是一片400×400的绘制区域-->
34     <canvas id="myCanvas" width="400" height="400">
35         <!--当浏览器不支持时,会直接忽略<canvas>标签,而直接显示下面这一行提示-->
36         Please use the browser supporting "canvas".
37     </canvas>
38 </body>
39 </html>
Hello WebGL.html

 

三、在Canvas中使用WebGL

标签:

原文地址:http://www.cnblogs.com/mirror-pc/p/4181398.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!