有一种动画书，就是快速翻动就可以看见里面的内容运动起来了。电脑动画和这个差不多，通过在动画区域内用一张新的图片代替旧的图片，并快速持续的改变，根据视觉暂留现象就在我们的大脑中形成了动画。
HTML5里面，我们通过下面的语句来实现画面的更替：
window.requestAnimationFrame()
还是一脸懵逼？我们先用代码把第一段话翻译一下吧：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Author" content="sunsi">
<meta name="Keywords" content="webgl,animation">
<meta name="Description" content="webgl tutorial from blog.techcave.cn">
<script type="text/javascript">
<!--
var cv, ctx;
function init() {
//1. 获取canvas元素
cv = document.getElementById("cv");
//2. 获取2D上下文
ctx = cv.getContext('2d');
//3. 其他的准备初始化工作
//4. 开始我们的动画
window.requestAnimationFrame(animation)
}
function animation() {
//1. 移走前一个画面
removePrevFrame();
//2. 放上一个新画面
newFrame();
//3. 持续的更新
window.requestAnimationFrame(animation)
}
function removePrevFrame() {
//清空画布，比较简单的方法是clearRect
ctx.clearRect(0,0,300,300);
}
function newFrame() {
//根据当前的状态载入新的画面
}
//-->
</script>
<title>Document</title>
</head>
<body onload="init()">
<canvas id="cv" width="600" height="600"></canvas>
</body>
</html>
首先，我们通过init方法绑定到body的onload事件，实现整个webgl画布和其他的初始化。里面关键第4点，使用 window.requestAnimationFrame语句来实现画面的刷新，该语句有个参数是个回调函数，在该函数中实现刷新逻辑，这里我们编写了animation方法实现。该回调方法通常、大致做几件事情：把冰箱门打开、把原来的大象拿出来,（读者：说人话。作者：请看注释）。好了，言归正传，是不是很简单。根据这个思路，我们把这个代码完善一下，画一根秒针——旋转的金箍棒。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Author" content="sunsi">
<meta name="Keywords" content="webgl,animation">
<meta name="Description" content="webgl tutorial from blog.techcave.cn">
<script type="text/javascript">
<!--
var cv, ctx;
var lastSeconds;
function init() {
//1. 获取canvas元素
cv = document.getElementById("cv");
//2. 获取2D上下文
ctx = cv.getContext('2d');
//3. 其他的准备初始化工作
//4. 开始我们的动画
window.requestAnimationFrame(animation)
}
function animation() {
//1. 移走前一个画面
removePrevFrame();
//2. 放上一个新画面
newFrame();
//3. 持续的更新
window.requestAnimationFrame(animation)
}
function removePrevFrame() {
//清空画布，比较简单的方法是clearRect
//保存当前状态，每次刷新都以该状态开始
ctx.save();
ctx.clearRect(0, 0, 400, 400);
}
function newFrame() {
//根据当前的状态载入新的画面
var now = new Date();
ctx.translate(200, 200);
var sec = now.getSeconds();
//这里保存平移状态，意思原点移动到200，200并保持住
ctx.save();
ctx.rotate(sec * Math.PI / 30); //360 * sec / 60 * Math.PI / 180
ctx.lineWidth = 6;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(150, 0);
ctx.stroke();
//弹出状态栈，要不每个循环都会在上次基础上平移旋转
ctx.restore();
ctx.restore()
}
//-->
</script>
<title>Document</title>
</head>
<body onload="init()">
<canvas id="cv" width="600" height="600"></canvas>
</body>
</html>
效果如下所示：
秒针转动的线条
原文地址：http://blog.techcave.cn/2017/09/14/WebGL-%E5%8A%A8%E7%94%BB/
相关推荐
标题中的“h5 webgl动画矩阵库”指的是一个专为HTML5（H5）和WebGL开发的工具集，它特别关注于矩阵运算，这是3D图形学中的核心概念。矩阵在3D图形编程中用于表示几何变换，如平移、旋转、缩放等。通过这个库，开发者...
这个压缩包中的特效代码可以作为学习和实践HTML5和WebGL动画的宝贵资源。通过分析和修改这些代码，开发者可以提升自己的技能，了解如何在网页中实现动态效果，比如3D旋转、粒子系统、视差滚动等。同时，对于那些希望...
Geppetto是用于定义WebGL动画的工作室工具。 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： yarn electron-dev 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载...
WebGL 动画：基于 WebGL（Web图形库）的 3D 图形渲染技术，可以实现高性能的复杂动画效果，适合开发需要展示 3D 动画的网页。 React 动画库：如果你在使用 React 框架，可以考虑使用像 React Spring、Framer Motion...
CodeDraw-Islands是一个精彩的WebGL动画项目，它利用了Three.js、GreenSock和Webpack这三个强大的JavaScript库和技术，为开发者提供了一个生动展示3D图形和动画效果的平台。以下是关于这些关键技术的详细解释： **...
Rosetta 宇宙飞船和 P67 彗星的微型 WebGl 动画 用法 最短路径，假设你安装了输入 grunt 并将浏览器指向 http://localhost:9000/dist/index.html 这应该编译rosetta_mission.coffee文件并安装所有必要的供应商库...
对于“jquery”和“jquery特效”、“jquery插件”的标签，这可能意味着在项目中还使用了jQuery库来处理页面交互或辅助WebGL动画。jQuery简化了DOM操作和事件处理，使开发者能更专注于WebGL的3D逻辑。jQuery插件可能...
网页动画素材 WebGL基于canvas画布绘制3D噪音线条酷炫动画特效。（抖音资料）网页动画素材 WebGL基于canvas画布绘制3D噪音线条酷炫动画特效。（抖音资料）网页动画素材 WebGL基于canvas画布绘制3D噪音线条酷炫动画...
第4章专注于WebGL动画的制作，包括帧动画、时间动画、插值与补间动画、关键帧动画、关节动画、蒙皮动画等。此外，还讲解了如何使用Tween.js库创建补间动画、为带关节的模型制作关键帧动画、材质和光源动画、纹理动画...
WebGL 动画：基于 WebGL（Web图形库）的 3D 图形渲染技术，可以实现高性能的复杂动画效果，适合开发需要展示 3D 动画的网页。 React 动画库：如果你在使用 React 框架，可以考虑使用像 React Spring、Framer Motion...
WebGL动画通常通过更新模型的矩阵来实现。每一帧，模型的变换矩阵会被更新，反映物体的位置、旋转和缩放。对于“海豚带动作”，这意味着需要根据时间戳更新海豚的关节角度，从而重现其灵活的游泳动作。这可能涉及到...
【WebGL图片过渡动画特效详解】 WebGL是一种在网页中实现3D图形渲染的技术，它允许开发者在浏览器中直接操作图形硬件，无需任何插件。这个基于WebGL的图片过渡动画特效利用了WebGL的强大功能，为用户带来了一系列...
HTML5+WebGL酷炫粒子爆炸动画特效.rar HTML5+WebGL酷炫粒子爆炸动画特效.rar HTML5+WebGL酷炫粒子爆炸动画特效.rar HTML5+WebGL酷炫粒子爆炸动画特效.rar HTML5+WebGL酷炫粒子爆炸动画特效.rar HTML5+WebGL酷炫粒子...
在这个项目中，JavaScript可能被用来处理用户与网页的交互，比如监听滚动事件、计算滚动位置、控制WebGL动画的播放速度和方向。此外，JavaScript还可以用于数据绑定和异步通信，确保背景效果与页面其他元素的同步。 ...
在本案例中，我们关注的是"webgl喷泉粒子发射动画特效"，它利用THREE.js库来实现。THREE.js是WebGL的一个强大框架，简化了复杂的3D编程，使得开发者可以更容易地创建交互式和动态的3D内容。 首先，让我们深入理解...
WebGL 动画：基于 WebGL（Web图形库）的 3D 图形渲染技术，可以实现高性能的复杂动画效果，适合开发需要展示 3D 动画的网页。 React 动画库：如果你在使用 React 框架，可以考虑使用像 React Spring、Framer Motion...
WebGL 动画：基于 WebGL（Web图形库）的 3D 图形渲染技术，可以实现高性能的复杂动画效果，适合开发需要展示 3D 动画的网页。 React 动画库：如果你在使用 React 框架，可以考虑使用像 React Spring、Framer Motion...
在这个项目中，“漂亮的WebGL背景图形动画特效”利用了WebGL的强大功能，为用户提供了一种引人入胜的视觉体验。 Three.js是一个非常流行的JavaScript库，它是WebGL开发的基石。Three.js简化了WebGL编程的复杂性，...
2. `js` 文件夹：通常包含JavaScript代码，这部分代码可能包含了WebGL的设置、场景的初始化、波浪的计算、动画的更新逻辑等。WebGL API需要程序员直接操作顶点、颜色、纹理等图形数据，创建和管理着色器，并通过...
【基于WebGL的粘性图像动画特效】是一种利用现代浏览器技术实现的动态视觉表现手法，主要依赖于HTML5中的WebGL API。WebGL是一种在浏览器环境中实现3D图形渲染的标准，它允许开发者直接在用户的浏览器上创建交互式的...