html5在线制作教程,HTML5 Canvas 制作动画
HTML5 Canvas 制作动画
在HTML5 canvas中绘制图像动画效果,你需要绘制出每一帧的图像,然后在一个极短的时间内从一帧过渡到下一帧,形成动画效果。
在线示例
要在HTML5画布上绘制动画,您需要在画布上绘制和重新绘制动画的帧。您需要非常快地这样做,以使许多图像看起来像动画。
为使动画获得最佳性能,requestAnimationFrame 在window对象上使用回调函数。您可以调用此函数,并在浏览器准备绘制动画的下一帧时将要调用的另一个函数作为参数传递。
当浏览器准备绘制下一帧时,通过让浏览器向应用程序发出信号,浏览器可以为动画启用硬件加速,并与浏览器中的其他重绘活动协调帧重绘。与使用JavaScript中的setTimeout() 函数对动画帧的绘制进行计时相比,总体体验应该要好得多。
这是一个代码示例:function animate() {
reqAnimFrame = (window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
var self = this, start, finish;
return window.setTimeout(function() {
start = +new Date();
callback(start);
finish = +new Date();
self.timeout = 1000/60 - (finish - start);
}, self.timeout);
});
reqAnimFrame(animate);
draw();
}
animate()函数首先获得对该requestAnimationFrame() 函数的引用。请注意,此函数在不同的浏览器中可能具有不同的名称。将该变量 reqAnimFrame设置为所有这些不为null的可能函数。
其次,reqAnimFrame()调用函数,将animate()函数作为参数传递。因此,当浏览器准备绘制下一帧时,将animate()调用该函数。
第三,animate()函数调用draw()函数。draw() 上例中未显示该功能。它应该做的是,首先清除画布(或需要清除的画布数量),然后绘制动画的下一帧。
上例中未显示的另一件事是,animate()应调用一次函数以启动动画。如果没有,requestAnimationFrame()则永远不会调用该函数,并且永远不会开始动画循环。
这是一个在画布上移动单个矩形的动画示例:HTML5 Canvas not supported
canvas动画实现的代码如下:
示例
HTML5 Canvas not supported
var x = 0;
var y = 15;
var speed = 5;
function animate() {
reqAnimFrame = (window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
var self = this, start, finish;
return window.setTimeout(function() {
start = +new Date();
callback(start);
finish = +new Date();
self.timeout = 1000/60 - (finish - start);
}, self.timeout);
});
reqAnimFrame(animate);
x += speed;
if(x <= 0 || x >= 475){
speed = -speed;
}
draw();
}
function draw() {
var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
context.clearRect(0, 0, 500, 170);
context.fillStyle = "#ff00ff";
context.fillRect(x, y, 25, 25);
}
animate();
测试看看 ‹/›
html5在线制作教程,HTML5 Canvas 制作动画相关推荐
- PPT制作教程:如何制作ppt
PowerPoint(PPT)是专门用于制作演示文稿(俗称幻灯片).广泛运用于各种会议.产品演示.学校教学等.学会如何制作ppt,成为提升工作效 率的好帮手.PPT包含有很多的功能,我们可以根据个人喜 ...
- 【CMS建站】写给大家看的网站制作教程02—网站制作的工具介绍与下载安装
作者 | 杨小爱 来源 | web前端开发(ID:web_qdkf) hello,大家好,我是杨小爱,欢迎来到web前端开发公号平台. 在上一篇<[CMS建站]写给大家看的网站制作教程01-了解 ...
- cad插件制作教程_CAD电子签名制作教程
文尾左下角阅读原文看视频教程 好课推荐: 1.CAD2014:点击查看 2.室内CAD:点击查看 3.CAD2019:点击查看4.CAD2018:点击查看5.Bim教程:点击查看6.室内手绘:点击查看 ...
- pageadmin CMS网站制作教程:visual studio制作网站模板的的步骤
pageadmin CMS网站建设教程:visual studio制作网站模板的的步骤 工欲善其事,必先利其器,一款好的开发工具可以让我们效率提高很多,前端开发工具很多,visual studio.D ...
- 怎么把照片做成计算机主题,Win7主题制作教程 电脑主题制作图文方法
修改Windows7主题文件的具体步骤: 一.修改.theme主题文件 1.到365主题下载"天涯明月刀主题后"进行安装,然后我们在C:\Windows\Resources\The ...
- html中的 脚本制作教程,html5教程制作简单画板代码分享
HTML5制作简单画板 复制代码代码如下: http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">> ...
- HTML5的绝活:巧用Canvas制作会动的时钟
这次我们的目标是画一个会和时间同步的时钟,不过没有美学感觉,样子丑的厉害. HTML5支持canvas了,我们可以直接在页面上绘图了,我看了下canvas和GDI+的接口差不多,所以我们先了解些基本的 ...
- html5 游戏制作教程,html5一步步实现超级玛丽游戏制作(新手教程源码)
[实例简介] [实例截图] [核心代码] My first Game body { border:none 0px; margin:0px; padding:10px; font-size : 16p ...
- solidworks动画制作教程——装配体爆炸动画
首先,啥叫爆炸视图呢?百度给了我们明确的定义:爆炸图,就是立体装配图,在日常生活中购买的各种各样的日常生活用品的使用说明书中都有装配示意图,它是图解说明各构件的.可以说这个具有立体感的分解说明图就是个 ...
最新文章
- php yii2自动给值,Yii2基于Ajax自动获取表单数据的方法
- aliyun oss 文件上传 java.net.SocketTimeoutException Read timed out 问题分析及解决
- mysql week 参数_MySQL week()函数及参数mode详解
- AnkhSVN使用手册
- javascript注意点(1)
- window server 2012 IE10 增强的安全设置 如何关闭
- python中的->
- python反转一个整数、123变成321_python整数反转算法
- 服务注册中心 eureka 搭建
- 近期状态几点简单思考
- java动态生成excel_java动态生成excel打包下载
- c++如何编写线程安全的DLL
- c语言指令保留字,C语言命令令、符号表
- 【前端】相信你会用到的一篇笔记---CSS篇(2)
- python高级用法使用手册(收藏)
- 解密拼多多800元裂变营销新方法
- Android点九图(.9.png)的特点和制
- 落花已去,相思成冢。十月的杜鹃雨,下得纷纷扬扬。我走在花瓣雨下,回忆我们曾经的甜蜜温馨,一回首,一抬头,仿佛你就在灯火阑珊处。那些掉落在地上的杜鹃,成了相思的墓,也许是为了祭奠我们曾经的美好。 杜鹃
- 2015.02.08——张佳莉
- 第十二章:email-mailbox:管理email归档-imaplib:IMAP4客户库-变种
热门文章
- jquery on()动态绑定元素的的点击事件无反应的问题记录
- 浅谈linux线程模型和线程切换
- Spring MVC测试框架详解——服务端测试
- Task.Run Vs Task.Factory.StartNew z
- jquery 插件 国外
- Checkbox与RadioGroup的使用方法
- 域名解析 A记录 MX记录 CNAME记录 TTL
- python2.7个3.7之间传输文件_关于将python2.7转换为python3.7的说明,python27,python37,散记...
- Python中selenium的玩法,小朋友看了都说学会了
- plsa java代码_LDA主题聚类学习小结