上一节:
下一节:

  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>元素，它只有两个特定的属性width和height加上所有核心 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>
    执行时，上述代码将产生以下输出 -
上一节:
下一节: