Merge pull request #57 from lebornjose/story/readme

Story/readme

README.md

@@ -1,4 +1,9 @@
 # webGl 2d
 
-+ 使用webgl 操作2d的场景案例
+## 使用webgl 操作2d的场景案例
+
+## 使用webav 解决一些视频合成和视频解码的问题
+
+## 使用webRc 视频在线视频的场景
+
 

src/view/videoEffect/cir_mask.vue

@@ -1,17 +1,19 @@
 
 <template>
-    <div>使用webgl 实现画面的圆形蒙版功能</div>
-    <canvas id="webgl"></canvas>
-    <div class="flex">
-      <button @click="play">播放</button>
-      <button @click="pause">暂停</button>
-      <button @click="reversal">蒙版反转</button>
-    </div>
+    <div class="container">
+      <div>使用webgl 实现画面的圆形蒙版功能</div>
+      <canvas id="webgl"></canvas>
+      <div class="flex">
+        <button @click="play">播放</button>
+        <button @click="pause">暂停</button>
+        <button @click="reversal">蒙版反转</button>
+      </div>
+    </div>  
   </template>
 
   <script setup lang="ts">
   import { onMounted } from 'vue';
-  import { initShaders } from '../../utils/utils'
+import { initShaders } from '../../utils/utils';
   
   
   const vertexShaderSource = `

src/view/videoEffect/color.vue

@@ -270,7 +270,6 @@ h3 {
 }
 
 .flex {
-  margin-left: 30px;
   width: 400px;
 }
 

src/view/videoEffect/crop.vue

@@ -1,15 +1,17 @@
 <template>
-    <div>使用webgl 实现视频的裁剪功能</div>
-    <canvas id="webgl"></canvas>
-    <div class="flex">
-      <button @click="play">播放</button>
-      <button @click="pause">播放</button>
-    </div>
+   <div class="container">
+      <div>使用webgl 实现视频的裁剪功能</div>
+      <canvas id="webgl"></canvas>
+      <div class="flex">
+        <button @click="play">播放</button>
+        <button @click="pause">播放</button>
+      </div>
+   </div>
 </template>
 
 <script setup lang="ts">
 import { onMounted } from 'vue';
-import { initShaders } from '../../utils/utils'
+import { initShaders } from '../../utils/utils';
 
 
 const vertexShaderSource = `

src/view/videoEffect/matrix.vue

@@ -1,16 +1,18 @@
 <template>
-    <div>使用二维场景的平移, 缩放，旋转</div>
-    <canvas id="webgl"></canvas>
-    <div class="flex">
-      <button @click="play">播放</button>
-      <button @click="pause">播放</button>
-    </div>
+   <div class="container">
+      <div>使用二维场景的平移, 缩放，旋转</div>
+      <canvas id="webgl"></canvas>
+      <div class="flex">
+        <button @click="play">播放</button>
+        <button @click="pause">暂停</button>
+      </div>
+   </div>
 </template>
 
 <script setup lang="ts">
 import { onMounted } from 'vue';
-import TransformationMatrix from '../../utils/mat3'
-import { initShaders } from '../../utils/utils'
+import TransformationMatrix from '../../utils/mat3';
+import { initShaders } from '../../utils/utils';
 
 
 const vertexShaderSource = `

src/view/videoEffect/video_animation.vue

@@ -1,5 +1,20 @@
 <template>
-    <div>
-        <h1>视频动画</h1>
+    <div class="container"> 
+        <h2>视频动画</h2>
+        <canvas id="webgl"></canvas>
+        <div class="flex">
+            <button @click="play">播放</button>
+            <button @click="pause">播放</button>
+        </div>
     </div>
 </template>
+<script setup>
+
+const play = () => {
+    
+}
+
+const pause = () => {
+    
+}
+</script>