在线演示

使用html5画布能够帮助我们快速实现简单的动画效果,基本原理如下:

每隔一定时间绘制图形并且清除图形,用来模拟出一个动画过程,可以使用context.clearrect(0, 0, x, y)方法来刷新需要绘制的图形

首先是绘制图形的方法,如下:

function myanimation() {

ctx.clearrect(0, 0, canvas_size_x, canvas_size_y);

if (x_icon canvas_size_x - size_x) {

stepx = -stepx;

}

if (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画布实现的粒子运动效果

原文来自:html5 canvas动画效果实现原理

html动画的 原理,HTML5 Canvas动画效果实现原理相关推荐

  1. HTML5 Canvas动画效果演示

    HTML5 Canvas动画效果演示 主要思想: 首先要准备一张有连续帧的图片,然后利用HTML5 Canvas的draw方法在不同的时间 间隔绘制不同的帧,这样看起来就像动画在播放. 关键技术点: ...

  2. canvas动画科技园_7个惊艳的HTML5 Canvas动画效果及源码

    HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来.另外,Canvas上绘制图形非常简单,本文就分享了一些强大的HTML5 Cnavas动画,一起来 ...

  3. html5常用动画效果教程,HTML5教程 8个经典HTML5 Canvas动画学习

    本篇教程探讨了HTML5教程 8个经典HTML5 Canvas动画学习,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < HTML5非常强大,尤其是Canvas ...

  4. html5 游戏 动画设计,HTML5 Canvas 动画实例

    原标题:HTML5 Canvas 动画实例 在开发在线游戏时,绘制动画是非常重要的.本节介绍一个使用 Canvas API 实现的动画实例--游戏人物的跑步动画. 动画的概念及原理 1.动画 动画是通 ...

  5. 7 个顶级的 HTML5 Canvas 动画赏析

    HTML5确实是一项改革浏览器乃至整个软件行业的新技术,它可以帮助我们Web开发者很方便地在网页上实现动画特效,而无需臃肿的Flash作为支撑.本文分享7个顶级的HTML5 Canvas 动画,都有非 ...

  6. 分享8款令人惊叹的HTML5 Canvas动画特效

    HTML5的确可以制作出非常绚丽的网页动画效果,尤其是利用HTML5 Canvas特性和HTML5 3D特性,我们更加可以欣赏到超酷的动画特效.今天我从html5tricks网站上整理了8款令人惊叹的 ...

  7. canvas动画科技园_8个经典炫酷的HTML5 Canvas动画欣赏

    HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮 ...

  8. 9个非常有趣的HTML5 Canvas动画特效合集

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

  9. 字 掉落 炫酷 网站_16个富有创意的HTML5 Canvas动画特效集合

    本文作者html5tricks,转载请注明出处 1.HTML5 Canvas高空瀑布下落湖面动画 HTML5 Canvas是一个神奇的网页技术,我们在Canvas画布上可以做任何有趣的事情.今天要分享 ...

最新文章

  1. Google 出品的 Java 编码规范,权威又科学,强烈推荐
  2. java xwork_java-与休眠的Struts2 xwork类型转换
  3. java继承的终极奥义_java学习笔记12-继承
  4. 【JVM】通过javap命令分析Java汇编指令
  5. 4.1 SE38数据类型
  6. 编程语言流行指数:Python 稳居宝座,Java 滑坡!
  7. SQL Sever 聚合函数
  8. gradle_Gradle
  9. nginx 二级目录 php,nginx两个tp程序一个放到二级目录下,我们要如何访问
  10. centos下yum安装lamp
  11. 产品读书《重新定义公司,谷歌是如何运营的》
  12. 【笔记总结】C陷阱与缺陷
  13. Cypress Test
  14. 思迈特软件完成C轮融资,让BI真正实现“普惠化”
  15. ArcBlock 问答 | 扎实打造影响整个区块链生态的产品
  16. lightdm .service: Start request repeated too quickly. grub正常,不显示登录和桌面 Endeavour
  17. linux tcp 113错误,linux系统报tcp_mark_head_lost错误的处理方法
  18. XXX is not defined.eslint no-undef
  19. 数据可视化---将某个股票每天收盘价通过matplotlib生成折线图
  20. python中小写字母和数字用什么表示_Python – 检查数字,大写,小写字母和特殊字符的输入...

热门文章

  1. python例程:《看图猜成语》程序
  2. MTK 利用SIM-ME LOCK锁sim卡的方法
  3. JSP 完全探索(PDG).rar 标准资源下载
  4. QWebEngineView显示网页白屏
  5. qq群 消息导出 html,申请qq群
  6. Windows无法启动MongoDB Server服务(错误1053)
  7. 80端口被占用怎么办?80端口被占用的解决方法
  8. MCE公司:Wnt (wingless) / β-catenin通路中的小分子抑制剂
  9. Android 9.0模拟器root权限获取
  10. python画卡通人物_python pyqt5 卡通人物形状窗体