webgl实现canvas炫酷文字展示动画效果代码

代码语言:html

所属分类:动画

代码描述:webgl实现canvas炫酷文字展示动画效果代码

代码标签: webgl canvas 炫酷 文字 展示 动画

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
    canvas {   position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;}
</style>
</head>

<body>
    <script >
        /* Parameters */
let vertexCount = 10000 * 4
let depth = 0
let fontName = 'Arial, Helvetica'
let fontSize = 24
let frame = 0
let smoothness = 6

/* Properties */
let vertices = []
let dVertices = []

let refctx = document.createElement('canvas').getContext('2d')
let gl = document.createElement('canvas').getContext('webgl')
let postctx = document.body.appendChild(document.createElement('canvas')).getContext('2d')
let canvas = gl.canvas

let compileShader = function (type, source) {
	let shader = gl.createShader(type), status;
  gl.shaderSource(shader, source)
  gl.compileShader(shader)
  status = gl.getShaderParameter(shader, gl.COMPILE_STATUS)
  if (status) return shader
  console.error('Shader compile error', gl.getShaderInfoLog(shader))
  gl.deleteShader(shader)
}

let createProgram = function (vertexShader, fragmentShader.........完整代码请登录后点击上方下载按钮下载查看

网友评论0