MyException - 我的异常网
当前位置:我的异常网» Web前端 » WebGL 卡通

WebGL 卡通

www.MyException.Cn  网友分享于:2013-09-19  浏览:0次
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/

文章评论

5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
程序员的鄙视链
程序员的鄙视链
为什么程序员都是夜猫子
为什么程序员都是夜猫子
漫画:程序员的工作
漫画:程序员的工作
老程序员的下场
老程序员的下场
我是如何打败拖延症的
我是如何打败拖延症的
一个程序员的时间管理
一个程序员的时间管理
我的丈夫是个程序员
我的丈夫是个程序员
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
Java程序员必看电影
Java程序员必看电影
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
那些争议最大的编程观点
那些争议最大的编程观点
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
程序员和编码员之间的区别
程序员和编码员之间的区别
旅行,写作,编程
旅行,写作,编程
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
 程序员的样子
程序员的样子
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
程序员应该关注的一些事儿
程序员应该关注的一些事儿
10个调试和排错的小建议
10个调试和排错的小建议
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
中美印日四国程序员比较
中美印日四国程序员比较
代码女神横空出世
代码女神横空出世
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
如何成为一名黑客
如何成为一名黑客
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
程序员必看的十大电影
程序员必看的十大电影
每天工作4小时的程序员
每天工作4小时的程序员
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
鲜为人知的编程真相
鲜为人知的编程真相
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有