有一种动画书，就是快速翻动就可以看见里面的内容运动起来了。电脑动画和这个差不多，通过在动画区域内用一张新的图片代替旧的图片，并快速持续的改变，根据视觉暂留现象就在我们的大脑中形成了动画。
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/
相关推荐
webgl矩阵库封装，h5移动端制作3d动画，简化矩阵复杂计算过程，直接调用已经封装好了的矩阵方法，简介方便，省去学习矩阵的成本
Geppetto是用于定义WebGL动画的工作室工具。 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： yarn electron-dev 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载...
Rosetta 宇宙飞船和 P67 彗星的微型 WebGl 动画 用法 最短路径，假设你安装了输入 grunt 并将浏览器指向 http://localhost:9000/dist/index.html 这应该编译rosetta_mission.coffee文件并安装所有必要的供应商库...
网页动画素材 WebGL基于canvas画布绘制3D噪音线条酷炫动画特效。（抖音资料）网页动画素材 WebGL基于canvas画布绘制3D噪音线条酷炫动画特效。（抖音资料）网页动画素材 WebGL基于canvas画布绘制3D噪音线条酷炫动画...
CodeDraw岛 使用Three.js，GreenSock和Webpack的WebGL动画示例。 屏幕截图示例
WebGL 动画：基于 WebGL（Web图形库）的 3D 图形渲染技术，可以实现高性能的复杂动画效果，适合开发需要展示 3D 动画的网页。 React 动画库：如果你在使用 React 框架，可以考虑使用像 React Spring、Framer Motion...
WebGL 动画：基于 WebGL（Web图形库）的 3D 图形渲染技术，可以实现高性能的复杂动画效果，适合开发需要展示 3D 动画的网页。 React 动画库：如果你在使用 React 框架，可以考虑使用像 React Spring、Framer Motion...
WebGL 动画：基于 WebGL（Web图形库）的 3D 图形渲染技术，可以实现高性能的复杂动画效果，适合开发需要展示 3D 动画的网页。 React 动画库：如果你在使用 React 框架，可以考虑使用像 React Spring、Framer Motion...
WebGL 动画：基于 WebGL（Web图形库）的 3D 图形渲染技术，可以实现高性能的复杂动画效果，适合开发需要展示 3D 动画的网页。 React 动画库：如果你在使用 React 框架，可以考虑使用像 React Spring、Framer Motion...
HTML5 WebGL粒子爆炸动画
这是一款基于WebGL的图片过渡动画特效。该特效共有8种不同的效果，它们都是在鼠标点击一张图片的时候，通过WebGL技术制作炫酷的过渡动画效果，再显示下一张图片。
WebGL 动画：基于 WebGL（Web图形库）的 3D 图形渲染技术，可以实现高性能的复杂动画效果，适合开发需要展示 3D 动画的网页。 React 动画库：如果你在使用 React 框架，可以考虑使用像 React Spring、Framer Motion...
WebGL 动画：基于 WebGL（Web图形库）的 3D 图形渲染技术，可以实现高性能的复杂动画效果，适合开发需要展示 3D 动画的网页。 React 动画库：如果你在使用 React 框架，可以考虑使用像 React Spring、Framer Motion...
WebGL 动画：基于 WebGL（Web图形库）的 3D 图形渲染技术，可以实现高性能的复杂动画效果，适合开发需要展示 3D 动画的网页。 React 动画库：如果你在使用 React 框架，可以考虑使用像 React Spring、Framer Motion...
WebGL 动画：基于 WebGL（Web图形库）的 3D 图形渲染技术，可以实现高性能的复杂动画效果，适合开发需要展示 3D 动画的网页。 React 动画库：如果你在使用 React 框架，可以考虑使用像 React Spring、Framer Motion...
WebGL 动画：基于 WebGL（Web图形库）的 3D 图形渲染技术，可以实现高性能的复杂动画效果，适合开发需要展示 3D 动画的网页。 React 动画库：如果你在使用 React 框架，可以考虑使用像 React Spring、Framer Motion...
WebGL 动画：基于 WebGL（Web图形库）的 3D 图形渲染技术，可以实现高性能的复杂动画效果，适合开发需要展示 3D 动画的网页。 React 动画库：如果你在使用 React 框架，可以考虑使用像 React Spring、Framer Motion...
WebGL 动画：基于 WebGL（Web图形库）的 3D 图形渲染技术，可以实现高性能的复杂动画效果，适合开发需要展示 3D 动画的网页。 React 动画库：如果你在使用 React 框架，可以考虑使用像 React Spring、Framer Motion...
WebGL 动画：基于 WebGL（Web图形库）的 3D 图形渲染技术，可以实现高性能的复杂动画效果，适合开发需要展示 3D 动画的网页。 React 动画库：如果你在使用 React 框架，可以考虑使用像 React Spring、Framer Motion...
WebGL 动画：基于 WebGL（Web图形库）的 3D 图形渲染技术，可以实现高性能的复杂动画效果，适合开发需要展示 3D 动画的网页。 React 动画库：如果你在使用 React 框架，可以考虑使用像 React Spring、Framer Motion...