在线演示

使用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. 助力5G行业应用扬帆启航,第二届5G毫米波产业高峰论坛圆满召开
  2. LeetCode209 长度最小的子数组(二分法)
  3. Cookie,Session的区别
  4. 有关于微软的IWebBrowser2::Navigate2/Navigate方法
  5. 前端学习(1527):过渡---文档分析
  6. (二十七)【2021 WWW】Learning Intents behind Interactions with Knowledge Graph for Recommendation
  7. Python – GitHub CentOS
  8. 总结的几个cocoapods的几个常见问题
  9. Android 蓝牙配对、连接和通信
  10. 怎样校验MD5码及sha1码数值(适用于Windows及Linux平台)
  11. 物联网发展跨越拐点!2020 AIoT产业年终盛典圆满落幕
  12. foxmail 163企业邮箱配置
  13. 第三方支付网关的选择
  14. 安卓APP源码和设计报告——小说阅读器
  15. 装VMware后在主机找不到VMnet1和VMnet8问题(巨详细已解决)
  16. 爬取小说网站章节和小说语音播放
  17. python使用结巴分词(jieba)创建自己的词典/词库
  18. 营销老炮儿征战史:渠道开发
  19. SD卡 TF卡 接口引脚定义
  20. JavaScript练习 - 数字转换成罗马数字

热门文章

  1. C# DateTime类详解
  2. Go 语言查看版本号
  3. switch语句如何用字符串?
  4. ZQOJ 1102: 火车票退票费计算(函数专题)
  5. 基于官方API实现ESA遥感数据批量下载的方法
  6. php设计模式--工厂模式
  7. GridView控件选择行
  8. outlook2007设置自动接收邮件间隔时间
  9. Windows系统学习笔记总结(自总结带目录)
  10. 微软将于10月5日推出Office 2021,与Windows 11同年同月同日生