HTML5用canvas怎么实现动画效果

如题所述

素材准备,基本框架的建立。
这里我们让一个有字的图片从左到右运动起来。
1.素材:图片一张。
2.框架的建立(如下图)

3.将图片素材引入网页。
4.定义canvas标签,获取canvas的上下文。
5.定义一个画图片的函数,使用canavs绘图API里面的drawImage来完成。

6.写一个更新的函数,因为我们要让他动起来,所以每时刻绘制的地方都不一样。注意:这儿要用clearRect,这个函数,主要是为了清空画布。

7.写定时函数,每隔0.2秒就更新一次,重新绘制。

我们来看看最终的效果和所有代码吧!
温馨提示:答案为网友推荐,仅供参考

相关了解……

你可能感兴趣的内容

大家正在搜

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 非常风气网