WebGL编程指南（一）-Web基础

WebGL程序使用三种语言开发：HTML、JavaScript和OpenGL ES着色器语言(GLSL ES)，着色器代码GLSL ES内嵌在JavaScript中。WebGL采用HTML5中新引入的<canvas>标签。如果没有WebGL，JavaScript只能在<canvas>上绘制二维图形，有了WebGL，就可以在上面绘制三维图形。

HTML
父元素和子元素：如果一个元素包含另一个元素，它就是被包含元素的父元素，被包含元素称为子元素。子元素中包含的任何元素都是外层的父元素的后代。这种类似家谱的结构是HTML代码的关键特征，它有助于在元素上添加样式和应用JavaScript。
每个Web浏览器都有一个内置CSS文件，它决定了每个HTML元素的默认样式。自己创建的CSS可以覆盖这些样式。对于不同浏览器，默认样式会稍有差异。
在这里插入图片描述

JavaScript是一种面向对象的语言，它处理的对象都在Web浏览器中，比如窗口、表单，以及如按钮和复选框的表单元素。对象具有属性，在JavaScript环境下，文档有标题，表单可以有复选框。对象可以做的事情称为方法，比如按钮click()、窗口open()。事件是用户在访问页面时执行的操作，比如提交表单和在图像上移动鼠标就是两种事件。JavaScript使用称为事件处理程序的命令来处理，用户在页面上的操作会触发脚本中的事件处理程序。
传统意义上，JavaScript是由ECMAScript、文档对象模型(DOM)和浏览器对象模型(BOM)组成的。Web浏览器、Node（服务端JavaScript平台）和Adobe Flash是ECMAScript实现可能的宿主环境。宿主环境不仅提供基本的ECMAScript实现，同时也会提供该语言的扩展，以便语言与环境之间对接交互。
/dynamic/books/

Ajax是Asynchronous JavaScript and XML（异步JavaScript和XML），用于创建交互Web应用程序的方式。一般指以下这些技术的组合：

XHTML
CSS
使用JavaScript访问的DOM（Document Object Model，文档对象模式）
XML或JSON，这是在服务器和客户端之间传输的数据格式
XMLHttpRequest，用来从服务器获取数据
用来表示文档中对象的标准模型称为DOM（Document Object Model）。在网页上，组成页面（或文档）的对象被组织在一个树型结构中。页面的*包含在<html>标签中，在其中会找到<head>和<body>标签，而其他标签包含在这两个标签中，依次类推。JavaScript将文档树中的每一项都当做对象，可以使用JavaScript操纵这些对象。树中的每个对象也称为树的节点(node)，可以使用JavaScript修改树的任何方面，包括添加、访问、修改和删除树上的节点。如果节点包含HTML标签，那么它就称为元素节点，否则就称为文本节点。

CSS
样式表中的每条规则都有两个主要部分：选择器(selector)和声明块(declaration block)。选择器决定哪些元素受影响；声明块由一个或多个属性-值对（每个属性-值对构成一条声明）组成。
在这里插入图片描述

继承(inheritance)是CSS里一个很重要的概念。针对下图的网页源码，浏览器会将它理解为如下的文档树。当你为某个元素应用CSS属性时，这些属性不仅会影响该元素，还会影响其下的分支元素。也就是说，这些下层的元素继承了其祖先元素的属性。
在这里插入图片描述
当规则发生冲突时，编写的样式会覆盖浏览器的默认样式。当两个或多个以上的样式发生冲突时，会应用特殊性高的样式声明，不管它位于样式表中的哪个位置。如果两个或两个以上的规则拥有相同的特殊性，则使用后出现的规则，除非其中某条规则标记了!important。

应用样式有三种方式：从一个或多个外部文件导入，插入到HTML文档的顶部，直接应用于代码中特定的HTML元素上。
外部样式表（首选方法）、嵌入样式表和内联样式（最不可取方法）。外部样式表非常适合给网站上的大多数页面或者所有页面设置一致的外观。可以在一个外部样式表中定义全部样式，然后让网站上的每个页面加载这个外部样式表，从而确保每个页面都有相同的设置。外部样式表要么是通过链接引用，要么是导入的（通过@import）。最好的方式是通过链接到样式表将样式表加载到HTML页面中。
在这里插入图片描述
外部样式表的另一个好处是，一旦浏览器在某个页面加载了它，在随后浏览器引用它的页面时，通常无需再向Web服务器请求该文件。浏览器会将它保存到缓存里，也就是保存到用户计算机里，并使用这个版本的文件，这样将加快对页面的加载。
嵌入样式表是在HTML页面的head部分创建一个style元素，其中包含了样式表。
在这里插入图片描述
内联样式将内容(HTML)和表现(CSS)混在一起，严重违背最佳实践。
选择器可以定义五个不同的标准来选择要进行格式化的元素：元素的类型或名称，元素所在的上下文，元素的类或ID，元素的伪类或伪元素，元素是否有某些属性和值。为了指出目标元素，选择器可以使用这五个标准的任意组合。
在这里插入图片描述

在这里插入图片描述

/enweitech/article/details/89316979

WebGL编程
<script>标签常常放在HTML页面的<head>部分（称为头脚本），也可以放在<body>部分中（体脚本）。在文档head部分，通常要指明页面标题，提供为搜索引擎准备的关于页面本身的信息，加载样式表，以及加载JavaScript文件（不过，出于性能考虑，多数时候在页面底部</body>标签结束前加载JavaScript是更好的选择）。

<!DOCTYPE html>
<html>
<head>
  <title>Barely a script at all</title>
  <script>
     = function(){
      ("myMessage").innerHTML = "Hello, Cleveland!";
    }
  </script>
</head>
<body>
<h1 >
</h1>
</body>
</html>

使用canvas标签

<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="utf-8" />
  <title>Draw a blue rectangle (canvas version)</title>
  </head>
  <body onload="main()"> //指定onload属性，告诉浏览器<body>元素加载完成后（也就是页面加载完成后）执行main()函数，并作为JavaScript程序的入口
  <canvas  width="400" height="400"> //通过width和height属性规定是一片400x400像素的区域 id属性为其指定唯一的标识符
  Please use a browser that supports "canvas"  //加入错误信息，提醒不支持的浏览器
  </canvas>
  <script src=""></script>
  </body>
</html>

function main() {
  var canvas = ('example');  //获取<canvas>元素
  if (!canvas) {
    ('Failed to retrieve the <canvas> element');  //向浏览器控制台显示参数字符串
 return;
  }
  var ctx = ('2d');  //向元素请求二维图形的绘图上下文
   = 'rgba(0,0,255,1.0)';  //设置填充颜色为蓝色
  (120,10,150,150); //使用填充颜色填充矩形
}

在这里插入图片描述

秒客网

WebGL编程指南（一）-Web基础

相关文章