HTML5 Canvas动画效果实现原理
使用HTML5画布可以帮助我们高速实现简单的动画效果。基本原理例如以下:
每隔一定时间绘制图形而且清除图形,用来模拟出一个动画过程,能够使用context.clearRect(0, 0, x, y)方法来刷新须要绘制的图形
首先是绘制图形的方法,例如以下:
function myAnimation() {
ctx.clearRect(0, 0, canvas_size_x, canvas_size_y); if (x_icon < 0 || x_icon > canvas_size_x - size_x) {
stepX = -stepX;
} if (y_icon < 0 || y_icon > canvas_size_y - size_y) {
stepY = -stepY;
} x_icon += stepX;
y_icon += stepY; ctx.drawImage(anim_img, x_icon, y_icon);
}
以上方法每隔一定时间清除画布内容。而且又一次计算绘制图形位置。一旦超过了画布大小。则反转坐标绘制图形。
以下是实际绘制图形方法:
function draw() {
var canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d"); anim_img = new Image(size_x, size_y); anim_img.onload = function() {
setInterval('myAnimation()', 5);
} anim_img.src = 'http://www.gbtags.com/gb/networks/avatars/80x8013d6393f-a44c-4180-8cb6-7bf0e4776283.png';
}
以上方法将图形定义,而且调用实际绘制动画的方法,搞定!
假设大家对于HTML5绘制动画有兴趣,或者希望了解怎样模拟物理动画效果。请阅读以下的互动教程,相信可以帮助你更好理解HTML画布:
原文来自:HTML5 Canvas动画效果实现原理
HTML5 Canvas动画效果实现原理的更多相关文章
- HTML5 Canvas动画效果演示
HTML5 Canvas动画效果演示 主要思想: 首先要准备一张有连续帧的图片,然后利用HTML5 Canvas的draw方法在不同的时间 间隔绘制不同的帧,这样看起来就像动画在播放. 关键技术点: ...
- HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET
HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET HTML5 Canvas动画效果演示
- 7个惊艳的HTML5 Canvas动画效果及源码
HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来.另外,Canvas上绘制图形非常简单,本文就分享了一些强大的HTML5 Cnavas动画,一起来 ...
- [js高手之路]html5 canvas动画教程 - 边界判断与小球粒子模拟喷泉,散弹效果
备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 本文,我们要做点有意思的效果,首先,来一个简单 ...
- [js高手之路]html5 canvas动画教程 - 边界判断与反弹
备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 边界反弹: 当小球碰到canvas的四个方向的 ...
- 7 个顶级的 HTML5 Canvas 动画赏析
HTML5确实是一项改革浏览器乃至整个软件行业的新技术,它可以帮助我们Web开发者很方便地在网页上实现动画特效,而无需臃肿的Flash作为支撑.本文分享7个顶级的HTML5 Canvas 动画,都有非 ...
- 8个经典炫酷的HTML5 Canvas动画欣赏
HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮 ...
- HTML5 3D动画效果
对以前来讲,3D动画拿到网页上展示是一件非常奢侈的事情,第一是浏览器不够先进,第二是大部分只能用flash实现伪3D.HTML5的出现,让实现网页3D动画变得非常简单,当然前提是你不要再使用像IE67 ...
- 16个富有创意的HTML5 Canvas动画特效集合
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...
随机推荐
- MongoDB使用手册
一.安装包下载地址 http://www.mongodb.org/downloads 二.服务器端使用 LINUX版本: ①用tar -zxvf mongodb-linux-x86_64-1.2.4. ...
- 详解js和jquery里的this关键字
详解js和jquery里的this关键字 js中的this 我们要记住:this永远指向函数运行时所在的对象!而不是函数被创建时所在的对象.this对象是在运行时基于函数的执行环境绑定的,在全局环境中 ...
- POJ - 1185 炮兵阵地 (状态压缩)
题目大意:中文题目就不多说大意了 解题思路: 1.每行最多仅仅有十个位置,且不是山地就是平原,那么就能够用1表示山地,0表示平原,将每一行的状态进行压缩了 2.接着找出每行能放炮兵的状态.先不考虑其它 ...
- android源码地址及下载介绍
git clone https://android.googlesource.com/device/common.git git clone https://android.googlesour ...
- Selenium 出现: Caused by: java.lang.ClassNotFoundException: org.w3c.dom.ElementTraversal
webDriver 运行的时候出现: Caused by: java.lang.ClassNotFoundException: org.w3c.dom.ElementTraversal 解决办法: 只 ...
- MEAN栈开发
Nodejs之MEAN栈开发(二)----视图与模型 2016-06-02 08:30 by stoneniqiu, 92 阅读, 2 评论, 收藏, 编辑 上一节做了对Express做了简单的介绍, ...
- GDI+ Tutorial for Beginners
原文 GDI+ Tutorial for Beginners GDI+ is next evolution of GDI. Using GDI objects in earlier versions ...
- Maven坐标 groupId artifactId version packaging classifier name
groupId定义项目属于哪个组,这个组往往和项目所在的组织或公司存在关联.譬如在googlecode上建立一个名为myapp的项目,那么groupId就应该是com.googlecode.myapp ...
- 深入浅出Hive企业级架构优化、Hive Sql优化、压缩和分布式缓存(企业Hadoop应用核心产品)
一.本课程是怎么样的一门课程(全面介绍) 1.1.课程的背景 作为企业Hadoop应用的核心产品,Hive承载着FaceBook.淘宝等大佬 95%以上的离线统计,很多企业里的离线统 ...
- 【Demo 0009】Android 组件(BroadcastReceiver)
本章学习要点: 1. 了解Broadcast的作用; 2. 掌握自定义广播和系统广播的接收: 3. 掌握广播的发送: