下面是用HTML5的<canvas>标签写的一个视差滚动动画的示例。采用了制作动画或者游戏编程中常用的双缓冲技术:获取到页面中的Canvas对象之后,创建了一个与页面Canvas同样大小的Canvas对象。绘图时先将图像绘制到缓冲Canvas中,等到每一桢的图像绘制完全后在把整个缓冲Canvas绘制到页面Canvas中。前景、中景、远景的视差通过控制移动速度来实现。整个动画的绘制部分只使用了Context对象的drawImage()方法。
HTML code:
JavaScript code:
其中的setInternal()方法是动画动起来的核心方法。其原型如下:
int setInternal(code, millisec[, lang]);
其中code表示需要循环执行的代码或者方法(名),必需;millisec表示周期性循环的周期,单位是毫秒,必需;lang表示脚本语言的类型,如JScript、VBScript、JavaScript,可选,不过一般都直接忽略。返回值为一个可以传递给clearInternal()方法的值,从而取消循环。
setInternal()方法是HTML DOM的一个内建方法,其作用是按照指定的周期循环调用某一段代码或者某个方法,直到窗口关闭或者调用clearInternal()方法结束循环。
顺带一提的是在Canvas画布中绘制图形,一般情况下后绘制的会覆盖先绘制的,所以在绘制图像的时候需要先绘制远景b0,再绘制中景b1,最后绘制近景b2。
分享到:
相关推荐
基于html5 canvas绘制的全屏酷炫星光闪烁3D视差背景动画特效,还有鼠标交互效果哦。
html5 canvas马赛克滚动调整
HTML5 Canvas圆点视差动画特效是一款鼠标移动跟随视差动画特效下载。
酷炫的html5 canvas全屏背景动画特效
HTML5 Canvas竖直线条视差特效是一款适用于网页动态背景特效。
html5 canvas页面滚动背景图片旋转动画特效
html5 canvas绘制几何图形动画特效 html5 canvas绘制几何图形动画特效 html5 canvas绘制几何图形动画特效
全屏背景动画的实现是由canvas完成
HTML5 Canvas粒子火焰动画特效,
HTML5 Canvas表白爱心动画特效是一款浪漫酷炫的情人节告白爱心动画特效。
jquery html5 canvas翻滚熔岩动画背景特效 jqueryhtml5 canvas翻滚熔岩动画背景特效
在HTML5中,Canvas上不仅可以绘制图形和动画,还可以实现各种炫酷的文字动画特效。之前分享过一篇文章7款超华丽的HTML5 Canvas文字动画特效,其中就有不少令人惊叹的HTML5文字特效。这次我们给大家分享的也是一款...
8款炫酷HTML5 Canvas星空背景动画 8款炫酷HTML5 Canvas星空背景动画 8款炫酷HTML5 Canvas星空背景动画
HTML5 Canvas赛车游戏动画,赛车游戏动画演示。
html5 canvas绘制竖直线条视差背景动画特效源码.zip
html5 canvas流动的瀑布动画特效 html5 canvas流动的瀑布动画特效
超炫酷HTML5 Canvas蝴蝶飞舞动画 超炫酷HTML5 Canvas蝴蝶飞舞动画
这是一款基于HTML5 Canvas实现的彩色渐变背景动画效果,跟随鼠标移动的HTML5交互式渐变背景动画特效。
html5 canvas毕达哥拉斯树生长动画特效 html5 canvas毕达哥拉斯树生长动画特效
html5 canvas熊熊火焰动画特效