WebGL - Html5 画布概述

  • 简述

    为了在 Web 上创建图形应用程序,HTML-5 提供了一组丰富的功能,例如 2D Canvas、WebGL、SVG、3D CSS 转换和 SMIL。要编写 WebGL 应用程序,我们使用 HTML-5 的现有画布元素。本章概述了 HTML-5 2D canvas 元素。
  • HTML5 画布

    HTML-5 <canvas>提供了一个简单而强大的选项来使用 JavaScript 绘制图形。它可用于绘制图形、制作照片构图或制作简单(也不是那么简单)的动画。
    这是一个简单的<canvas>元素,它只有两个特定的属性widthheight加上所有核心 HTML-5 属性,如 id、name 和 class。

    句法

    下面给出了 HTML canvas 标签的语法。您必须在双引号(“”)内提及画布的名称。
    
    <canvas id = "mycanvas" width = "100" height = "100"></canvas>
    

    画布属性

    canvas 标签具有三个属性,即 id、width 和 height。
    • Id - Id 表示文档对象模型 (DOM)中画布元素的标识符。
    • width- width表示画布的宽度。
    • height- height表示画布的高度。
    这些属性决定画布的大小。如果程序员没有在 canvas 标签下指定它们,那么默认情况下,Firefox、Chrome 和 Web Kit 等浏览器会提供大小为 300 × 150 的 canvas 元素。

    示例 - 创建画布

    以下代码显示了如何创建画布。我们使用 CSS 为画布提供彩色边框。
    
    <html>
       <head>
          <style>
             #mycanvas{border:1px solid red;}
          </style>
       </head>
       <body>
          <canvas id = "mycanvas" width = "100" height = "100"></canvas>
       </body>
    </html>
    
    执行时,上述代码将产生以下输出 -
  • 渲染上下文

    <canvas> 最初是空白的。要在 canvas 元素上显示某些内容,我们必须使用脚本语言。该脚本语言应该访问渲染上下文并在其上绘制。
    canvas 元素有一个名为getContext()的 DOM 方法,用于获取渲染上下文及其绘图函数。此方法采用一个参数,即上下文类型2d
    将编写以下代码以获取所需的上下文。您可以在 body 标记内编写此脚本,如下所示。
    
    <!DOCTYPE HTML>
    <html>
       <body>
          <canvas id = "mycanvas" width = "600" height = "200"></canvas>
          <script>
             var canvas = document.getElementById('mycanvas');
             var context = canvas.getContext('2d');
                   
             context.font = '20pt Calibri';
             context.fillStyle = 'green';
             context.fillText('欢迎来的菜鸟教程', 70, 70);
          </script>
       </body>
    </html>
    
    执行时,上述代码将产生以下输出 -
    有关 HTML-5 2D Canvas 的更多示例,请查看以下链接HTML-5 Canvas
  • WebGL上下文

    HTML5 Canvas 也用于编写 WebGL 应用程序。要在 canvas 元素上创建 WebGL 渲染上下文,您应该将字符串experimental-webgl而不是2d传递给canvas.getContext()方法。某些浏览器仅支持“ webgl ”。
    
    <!DOCTYPE html>
    <html>
       <canvas id = 'my_canvas'></canvas>
         
       <script>
          var canvas = document.getElementById('my_canvas');
          var gl = canvas.getContext('experimental-webgl');
          gl.clearColor(0.9,0.9,0.8,1);
          gl.clear(gl.COLOR_BUFFER_BIT);
       </script>
    </html>
    
    执行时,上述代码将产生以下输出 -