webgl+canvas实现线条波纹动画效果代码
代码语言:html
所属分类:动画
代码描述:webgl+canvas实现线条波纹动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<style>
html, body {
overflow: hidden;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background:#000;
}
canvas {
position: absolute;
width: 100%;
height: 100%;
background:#000;
}
</style>
<script>
"use strict";
// webGL line_strip
const webGL = {
init(options) {
this.elem = document.querySelector("canvas");
this.gl = (
this.elem.getContext("webgl", options) ||
this.elem.getContext("experimental-webgl", options)
);
if (!this.gl) return false;
const vertexShader = this.gl.createShader(this.gl.VERTEX_SHADER);
this.gl.shaderSource(vertexShader, `
precision highp float;
attribute vec2 aPosition;
.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0