WebGL学习记录

第一章 webGL入门
1.例子(最短的WebGL程序)

<template>
  <div class="webGL">
    <div class="drawwebGL">
     <!-- 将使用的绘制的图形 -->
 <canvas id="myCanvas" width="40" height="40"></canvas>
    </div>

  </div>
</template>

<script>
// 引入webGL函数库
import wbgl from '@/libs/cuon-utils.js'
export default {
  mounted () {
    this.draw()
  },
  methods: {
    draw () {
       // 获取canvas元素
      var canvas = document.getElementById('myCanvas')
      // 获取WebGL绘图上下文
      var gl = wbgl.getWebGLContext(canvas)
      if (!gl) {
        console.log('没找到')
      }
      // 指定清空canvas颜色(rgba格式设置背景色)
      gl.clearColor(0.0, 0.0, 0.0, 1.0)
      // 清空canvas
      gl.clear(gl.COLOR_BUFFER_BIT)
    }

  }
}
</script>