diff --git "a/docs/1 WebGL\347\250\213\345\272\217\347\273\223\346\236\204" "b/docs/1 WebGL\347\250\213\345\272\217\347\273\223\346\236\204"
new file mode 100644
index 0000000..037f234
--- /dev/null
+++ "b/docs/1 WebGL\347\250\213\345\272\217\347\273\223\346\236\204"	
@@ -0,0 +1,19 @@
+# WebGL
+
+WebGL1.0基于OpenGL ES2.0
+WebGL2.0基于OpenGL ES3.0
+这里使用WebGL1.0,参考<<WebGL编程指南>>的代码改写
+
+
+# OpenGL ES着色器语言
+
+WebGL基于OpenGL ES 2.0 使用GLSL ES编写着色器
+着色器语言是一种类似于C的编程语言
+
+# WebGL的程序结构
+
+WebGL的程序主要由HTML，javascript和GLSL ES三部分组成
+
+HTML中使用canvas元素作为WebGL的容器
+javascript实现交互效果
+GLSL ES用来描述三维图形的创建
\ No newline at end of file
diff --git "a/docs/2 WebGL 2d\347\273\230\345\210\266" "b/docs/2 WebGL 2d\347\273\230\345\210\266"
new file mode 100644
index 0000000..bcfecb3
--- /dev/null
+++ "b/docs/2 WebGL 2d\347\273\230\345\210\266"	
@@ -0,0 +1,23 @@
+# 设置背景色
+
+## 主要代码文件
+src/index.html
+src/webgl/hello.js
+
+## index.html
+引入canvas标签。
+
+## hello.js
+`
+ const canvas = document.getElementById('webgl');
+
+const gl = canvas.getContext('webgl');
+`
+获取Webgl上下文对象
+
+`
+gl.clearColor(0.0,0.0,0.0,1.0);
+gl.clear(gl.COLOR_BUFFER_BIT);
+`
+设置背景色
+清空canvas
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 6f4ffce..f7871ae 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1 +1,3 @@
-console.log("Test");
\ No newline at end of file
+import hello from "./webgl/hello";
+
+hello();
\ No newline at end of file
diff --git a/src/webgl/hello.js b/src/webgl/hello.js
new file mode 100644
index 0000000..d959eea
--- /dev/null
+++ b/src/webgl/hello.js
@@ -0,0 +1,13 @@
+export default function(){
+    const canvas = document.getElementById('webgl');
+
+    const gl = canvas.getContext('webgl');
+
+    if (!gl) {
+        console.error("获取webgl失败");
+        return false;
+    }
+
+    gl.clearColor(0.0,0.0,0.0,1.0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+}
\ No newline at end of file