欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
  一、WebGL简介
 
  WebGL是OpenGL ES的网页版,是HTML5标准的一部分,通过<canvas>标签绘制图形,支持GLSL编写shader(后续介绍)。
 
  二、示例代码
 
  HTML文件代码
 
  <html>
 
  ? <head>
 
  ? <title>画矩形</title>
 
  ? </head>
 
  ? <body οnlοad="main()">
 
  ? <canvas id="webgl" width="400" height="400">
 
  ? 请使用支持canvas标签的浏览器!
 
  ? </canvas>
 
  ? <script src="DrawRectangle.js"></script>
 
  ? </body>
 
  </html>
 
  javascript代码
 
  function main() {?
 
  ? //获取 <canvas>元素
 
  ? var canvas = document.getElementById('webgl');?
 
  ? if (!canvas) {
 
  ? console.log('获取<canvas>标签失败!');
 
  ? return false;
 
  ? }
 
  ? var ctx = canvas.getContext('2d');
 
  ? ctx.fillStyle = 'rgba(255, 0, 0, 1.0)';
 
  ? ctx.fillRect(120, 10, 150, 150);
 
  }

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h62642.shtml