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