HTML5用canvas实现动画效果的方法lt！DOCTYPE HTML lthtml lthead ltstyle body margin 0pxpadding 0px ltstyle lthead ltbody ltcanvas id=quotmyCanvasquot width=quot578quot height=quot200quotltcanvas ltscript windowrequestAnimFrame = functioncallback return。

当然我们也可以通过设置特殊的图片，来完成一些特殊的效果5CSS3 动画CSS3应该是动画家族里绝对不会被遗忘的一名成员这里我们定义它为 擅长于平面层的动画CSS3的缺陷应该在于它的部分属性还没有被浏览器有好的支持关于动画的应用和基础属性介绍在之前也已经介绍过了，如果小伙伴们忘记了，可以。

使用HTML5画布canvas能够快速实现简单的动画效果，基本原理如下每隔一定时间绘制图形并且清除图形，用来模拟出一个动画过程，可以使用contextclearRect0， 0， x， y方法来刷新需要绘制的图形 首先是绘制图形的方法，如下function myAnimation ctxclearRect0， 0， canvas_size_x， canvas_size_y。

1首先我们创建一个简单的项目，如图所示包括html，css和img三个2这里是html文件，引入css和html代码文件，如图所示3这里是css文件代码，上面是div和图片显示的效果代码，后面是动画效果4这里是事件，这里定义了四个时间段的状态，兼容了ie的5如图所示这里是效果图，会根据时间轮播显示。

ltscriptimpressinitltscript 2添加CSS样式代码ltlink href=quotcssguojicssquot rel=quotstylesheetquot 3添加HTML代码将lt！效果html开始lt！效果html结束之间的html和js代码放在ltbodyltbody之间该HTML5网页模版是一款基于html5实现的网页旋转移动切换PPT展示。