您现在的位置: 首页 > JS特效 > HTML5+CSS3特效 > 正文

超炫的Canvas下雨动画

作者:admin来源:网络浏览:时间:2016-03-28 18:53:32我要评论
分享到

内容介绍

Canvas做的下雨效果动画,感觉蛮有意思的。就研究了下,这里来分享下

Canvas动画基础

大家都知道,Canvas其实只是一个画板。我们可以应用canvas的api在上面绘制各种图形。
Canvas 2D 的API:
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D

那么Canvas绘制动画的步骤就是:

  1. 绘制第一帧图形(利用API绘图)

  2. 清空画板(应用clearRect()或fillRect())

  3. 绘制下一帧动画

用什么来控制动画每一帧的绘制时间呢?大家很容易想到 window.setInterval()和window.setTimeout()。没错用这两个也可以。除此之外,后来又出现一个新的方法:window.requestAnimationFrame(callback)。

下载资源:431 下载积分:0 积分
相关热词搜索:
上一篇:HTML5 canvas时钟
下一篇:HTML5小熊时钟