在vue中通过WEBGL渲染一个2d三角形

绘制流程
获取Webgl绘图上下文->初始化着色器-》设置点的坐标信息-》设置背景色->清空->绘制

<template>
 <div class="page">
    <canvas id="glcanvas" width="640" height="480"></canvas>
 </div>
</template>

<script>
export default {
 data() {
    return {
        trees:"ssss",
        horizAspect:480.0/640.0,
        squareVerticesBuffer:null,
    }
 },
  methods:{
    initShaderProgram(gl, vsSource, fsSource){
        const vertexShader = this.loadShader(gl, gl.VERTEX_SHADER, vsSource);
        const fragmentShader = this.loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
        // 创建着色器程序

        const shaderProgram = gl.createProgram();
        gl.attachShader(shaderProgram, vertexShader);
        gl.attachShader(shaderProgram, fragmentShader);
        gl.linkProgram(shaderProgram);

        // 创建失败， alert
        if (!gl.getProgramParameter(shaderProgram, gl.LIN