canvas简介 <canvas></canvas>是html5中新增的标签，用于绘制图形。canvas指的就是画布，用

简介

<canvas></canvas>是html5中新增的标签，用于绘制图形。canvas指的就是画布，用画笔画出你想要的任何东西，然后展示。

使用

就最基本的三步：

1.获取<canvas>元素对应的DOM对象。

2.调用Canvas对象的getContext()方法，根据传入的参数，获取对应的画笔（2d画笔、3d画笔）。

3.调用画笔对象提供的API画图嘛。

API及技术点

width、height

canvas对象本身有width、height属性，设置初始值后，表示在多高多宽的画布上绘图。

绘图完毕后，重置width或者height会导致canvas画布清空。

绘图完毕后，通过调整canva.style.width（不同于画布本身的width属性）或canva.style.height可以调整画布的样式。

WebGL

使用方式：

 // 创建webGl画笔
 const gl = canvas.getConText('webGl')
 
 // 创建2个着色器对象，（顶点着色器、片元着色器）
 const vertexShader = gl.createShader(gl.VERTEX_SHADER); // 顶点，参数为着色器类型
 const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); // 片元
 
 // 着色器需要用GLSL源码来编译，先写两个着色器对应的GLSL源码例子
 var vertexShaderSource =
  "attribute vec4 position;\n"+
  "void main() {\n"+
  "  gl_Position = position;\n"+
  "}\n";

var fragmentShaderSource =
  "void main() {\n"+
  "  gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n"+
  "}\n";

// 给对应的着色器对象，上GLSL源码。
 gl.shaderSource(vertexShader, vertexShaderSource);
 gl.shaderSource(fragmentShader, fragmentShaderSource);
 
// 让着色器对象编译对应的GLSL源码。
gl.compileShader(vertexShader);
gl.compileShader(fragmentShader);

// 此时的着色器依然是不可用的，它需要被添加到一个WebGLProgram里

// 那我们就创建一个WebGLProgram嘛
var program = gl.createProgram();

// 着色器添加到WebGLProgram中
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);

// gl连接WebGLProgram
gl.linkProgram(program)

// 着色器程序在使用的过程中要分为几步，包括告知 GPU 来使用这段着色器程序，绑定合适的数据缓冲区，配置相关选项，最终把图像绘制到屏幕上

// 告知CPU使用WebGLProgram
gl.useProgram(program)

// 创建数据缓冲区，例如绘制立方体时，顶点着色器需要很多顶点数据，我们可以向数据缓冲区一次性填充大量顶点数据并保存在其中，以供着色器使用
// 创建顶点着色器数据缓冲区
const vertexBuffer =  gl.createBuffer()

// 绑定缓冲区，gl.ARRAY_BUFFER参数指该Buffer包含顶点属性，如顶点坐标，纹理坐标数据或顶点颜色数据
gl.bindBuffer(gl.ARRAY_BUFFER，vertexBuffer)

// 初始化缓冲区，参数1：指定Buffer绑定点（目标），参数2：size（设定数据存储区大小）或者srcData（初始数据），参数3：指定数据存储区的使用方法
// srcData
const dataArray = new Float32Array([21,31])

gl.bufferData(gl.ARRAY_BUFFER，dataArray，gl.STATIC_DRAW)

// 返回了给定WebGLProgram对象中某属性的下标指向位置,a_position是GLSL源码中的，本源码没有这个变量，只起举例作用
const a_position = gl.getAttribLocation(programm,'a_position')

// BYTES_PER_ELEMENT属性代表了强类型数组中每个元素所占用的字节数
const FSIZE = vertices.BYTES_PER_ELEMENT

// 告诉显卡从当前绑定的缓冲区中读取顶点数据
gl.vertexAttribPointer(a_position,2,gl.Float,false,FSIZE*4,0)

// 可以打开属性数组列表中指定索引处的通用顶点属性数组
gl.enableVertexAttribArray(a_position)