GeekUniversity · omiomi · Aug 1, 2020 · Aug 9, 2020 · Aug 10, 2020 · Aug 10, 2020
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+.DS_Store
+*node_modules/
+*dist/
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,13 @@
+{
+    // 使用 IntelliSense 了解相关属性。 
+    // 悬停以查看现有属性的描述。
+    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+
+        {
+            "type": "node",
+            "request": "launch"
+        }
+    ]
+}
diff --git a/webGL/001/001.html b/webGL/001/001.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Basic JavaScript module example</title>
+    <style>
+      canvas {
+        border: 1px solid black;
+      }
+    </style>
+    <script type="module" src="main.js"></script>
+  </head>
+  <body>
+
+  </body>
+</html>
diff --git a/webGL/001/001.js b/webGL/001/001.js
@@ -0,0 +1,18 @@
+// 从这里开始
+class main { 
+    constructor(id){
+        this.canvas = document.querySelector(id)
+        this.gl = gl = canvas.getContext("webgl");
+    }
+    render(){
+        if (!this.gl) {
+            throw new Error("无法初始化WebGL，你的浏览器、操作系统或硬件等可能不支持WebGL。");
+        }
+        // 使用完全不透明的黑色清除所有图像
+        this.gl.clearColor(0.0, 0.0, 0.0, 1.0);
+        // 用上面指定的颜色清除缓冲区
+        this.gl.clear(gl.COLOR_BUFFER_BIT);
+    }
+}
+
+module.exports = main;
diff --git a/webGL/001/main.mjs b/webGL/001/main.mjs
@@ -0,0 +1,13 @@
+import { create, createReportList } from './modules/canvas.js';
+import { name, draw, reportArea, reportPerimeter } from './modules/square.js';
+import randomSquare from './modules/square.js';
+
+let myCanvas = create('myCanvas', document.body, 480, 320);
+let reportList = createReportList(myCanvas.id);
+
+let square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
+reportArea(square1.length, reportList);
+reportPerimeter(square1.length, reportList);
+
+// Use the default
+let square2 = randomSquare(myCanvas.ctx);
diff --git a/webGL/001/modules/canvas.js b/webGL/001/modules/canvas.js
@@ -0,0 +1,29 @@
+function create(id, parent, width, height) {
+    let divWrapper = document.createElement('div');
+    let canvasElem = document.createElement('canvas');
+    parent.appendChild(divWrapper);
+    divWrapper.appendChild(canvasElem);
+
+    divWrapper.id = id;
+    canvasElem.width = width;
+    canvasElem.height = height;
+
+    let ctx = canvasElem.getContext('2d');
+
+    return {
+      ctx: ctx,
+      id: id
+    };
+  }
+
+  function createReportList(wrapperId) {
+    let list = document.createElement('ul');
+    list.id = wrapperId + '-reporter';
+
+    let canvasWrapper = document.getElementById(wrapperId);
+    canvasWrapper.appendChild(list);
+
+    return list.id;
+  }
+
+  export { create, createReportList };
diff --git a/webGL/001/modules/square.js b/webGL/001/modules/square.js
@@ -0,0 +1,57 @@
+const name = 'square';
+
+function draw(ctx, length, x, y, color) {
+  ctx.fillStyle = color;
+  ctx.fillRect(x, y, length, length);
+
+  return {
+    length: length,
+    x: x,
+    y: y,
+    color: color
+  };
+}
+
+function random(min, max) {
+   let num = Math.floor(Math.random() * (max - min)) + min;
+   return num;
+}
+
+function reportArea(length, listId) {
+  let listItem = document.createElement('li');
+  listItem.textContent = `${name} area is ${length * length}px squared.`
+
+  let list = document.getElementById(listId);
+  list.appendChild(listItem);
+}
+
+function reportPerimeter(length, listId) {
+  let listItem = document.createElement('li');
+  listItem.textContent = `${name} perimeter is ${length * 4}px.`
+
+  let list = document.getElementById(listId);
+  list.appendChild(listItem);
+}
+
+function randomSquare(ctx) {
+  let color1 = random(0, 255);
+  let color2 = random(0, 255);
+  let color3 = random(0, 255);
+  let color = `rgb(${color1},${color2},${color3})`
+  ctx.fillStyle = color;
+
+  let x = random(0, 480);
+  let y = random(0, 320);
+  let length = random(10, 100);
+  ctx.fillRect(x, y, length, length);
+
+  return {
+    length: length,
+    x: x,
+    y: y,
+    color: color
+  };
+}
+
+export { name, draw, reportArea, reportPerimeter };
+export default randomSquare;
diff --git a/webGL/002/1.js b/webGL/002/1.js
@@ -0,0 +1,27 @@
+var name = 'World!';
+(function () {
+if (typeof name === 'undefined') {
+    var name = 'Jack';
+    console.log('Goodbye ' + name);
+} else {
+    console.log('Hello ' + name);
+}
+})();
+var str = 'World!';   
+(function (name) {
+if (typeof name === 'undefined') {
+    var name = 'Jack';
+    console.log('Goodbye ' + name);
+} else {
+    console.log('Hello ' + name);
+}
+})(str)
+
+
+var END = Math.pow(2, 53);
+var START = END - 100;
+var count = 0;
+for (var i = START; i <= END; i++) {
+    count++;
+}
+console.log(count);