WebGL 动画

有一种动画书,就是快速翻动就可以看见里面的内容运动起来了。电脑动画和这个差不多,通过在动画区域内用一张新的图片代替旧的图片,并快速持续的改变,根据视觉暂留现象就在我们的大脑中形成了动画。

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/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序猿

用 Python 向你比个心

之前写了一篇用 Python 画一个小猪佩奇和哆啦 A 梦,然后最近看到有人用 turtle 画了一个心,觉得挺有意思的,于是把代码复制到本地,再加了个播放音乐...

31650
来自专栏熊二哥

React快速入门

正好旁边前端的兄弟最近在学习React,为了更深入的了解前端的业态,也果断来学习一发,目标是有个基础的了解,需要时能快速上手就OK,说实话,个人并不是很喜欢它的...

23280
来自专栏更流畅、简洁的软件开发方式

从吉日嘎拉那里学到的……

多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个。基于jQuery,无限级联动,支持...

22560
来自专栏练小习的专栏

请不要忘了,有一个值叫 inherit

请不要忘了,有一个值叫 inherit 下午在写组件的时候瞄了一眼qq群,看到有个哥们在问一道css的问题,他的问题如下图 ? 红圈部分超出主体的部分,他是用伪...

24150
来自专栏iKcamp

追溯 React Hot Loader 的实现

文:萝卜(沪江金融前端开发工程师) 本文原创,转载请注明作者及出处 如果你使用 React ,你可以在各个工程里面看到 Dan Abramov 的身影。他于...

492140
来自专栏前端架构

重谈react优势——react技术栈回顾

现在,react已经慢慢退火,该用用react技术栈的已经使用上,填过多少坑,加过多少班,血泪控诉也不下千文。

19630
来自专栏更流畅、简洁的软件开发方式

【分享】纯js的n级联动列表框 —— 基于jQuery,支持下拉列表框和列表框,最重要的是n级,当然还有更重要的

多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个。基于jQuery,无限级联动,支持...

47180
来自专栏腾讯NEXT学位

CSS模块化的演进

? | 导语 CSS 做为 Web 技术的基石,从一开始就展示出了巨大的潜力。它的入门非常简单,你只需为元素定义好样式属性和值。然而 CSS 特性随着规范的升...

33720
来自专栏IMWeb前端团队

iconfont关于content值的坑

font-carrier是一个功能强大的字体操作库,使用它你可以随心所欲的操作字体。让你可以在svg的维度改造字体的展现形状。 //可以设置某个字对应的形状,当...

228100
来自专栏hightopo

原 基于 HTML5 WebGL 的 3D

33860

扫码关注云+社区

领取腾讯云代金券