WebGL系列教程:WebGL基础知识

下面我们来正式学习WebGL开发中的一些基本的概念和知识。

一、HTML画布

为了在 Web 上创建图形应用程序,HTML5 提供了一组丰富的功能,例如 2D Canvas、WebGL、SVG、3D CSS 转换和 SMIL。要编写 WebGL 应用程序,就需要用到 HTML5 的画布元素。

1.1 HTML5 画布

HTML5 的标签提供了一个简单而强大的选项来实现 JavaScript 的图形绘制,它不仅可以用于绘制图形、制作照片构图,还可以用它开发炫酷的动画。一个最简单的元素,只需要指定id、width、height等属性即可,如下所示。

<canvas id = "mycanvas" width = "100" height = "100"></canvas>

canvas 标签具有三个属性,即 id、width 和 height,这些属性决定画布的大小。如果程序员没有在 canvas 标签下指定它们,那么默认情况下,Firefox、Chrome 和 Web Kit 等浏览器会提供大小为 300 × 150 的 canvas 元素。

下面是一个HTML画布的示例。

<html>
   <head>
      <style>
         #mycanvas{border:1px solid red;}
      </style>
   </head>
   <body>
      <canvas id = "mycanvas" width = "100" height = "100"

猜你喜欢

转载自blog.csdn.net/xiangzhihong8/article/details/132082686