1、首先我们创建一个简单的项目，如图所示包括html，css和img三个。
2、这里是html文件，引入css和html代码文件，如图所示。
3、这里是css文件代码，上面是div和图片显示的效果代码，后面是动画效果。
4、这里是事件，这里定义了四个时间段的状态，兼容了ie的。
5、如图所示这里是效果图，会根据时间轮播显示下一张图片 了。
主要思想：\x0d\x0a首先要准备一张有连续帧的图片，然后利用HTML5Canvas的draw方法在不同的时间间隔绘制不同的帧，这样看起来就像动画在播放。\x0d\x0a关键技术点：\x0d\x0aJavaScript函数setTimeout()有两个参数，第一个是参数可以传递一个JavaScript方法，\x0d\x0a另外一个参数代表间隔时间，单位为毫秒数。代码示例：\x0d\x0asetTimeout(update,1000/30)\x0d\x0aCanvas的API-drawImage()方法，需要指定全部9个参数：\x0d\x0actx.drawImage(myImage,offw,offh,width,height,x2,y2,width,height)\x0d\x0a其中offw,offh是指源图像的起始坐标点，width,height表示源图像的宽与高，x2,y2表\x0d\x0a示源图像在目标Canvas上的起始坐标点。\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0aCanvasMouseEventDemo\x0d\x0a\x0d\x0a\x0d\x0avarctx=null//globalvariable2dcontext\x0d\x0avarstarted=false\x0d\x0avarmText_canvas=null\x0d\x0avarx=0,y=0\x0d\x0avarframe=0/롹*5+2\x0d\x0avarimageReady=false\x0d\x0avarmyImage=null\x0d\x0avarpx=300\x0d\x0avarpy=300\x0d\x0avarx2=300\x0d\x0avary2=0\x0d\x0awindow.onload=function(){\x0d\x0avarcanvas=document.getElementById("animation_canvas")\x0d\x0aconsole.log(canvas.parentNode.clientWidth)\x0d\x0acanvas.width=canvas.parentNode.clientWidth\x0d\x0acanvas.height=canvas.parentNode.clientHeight\x0d\x0aif(!canvas.getContext){\x0d\x0aconsole.log("Canvasnotsupported.PleaseinstallaHTML5compatiblebrowser.")\x0d\x0areturn\x0d\x0a}\x0d\x0a//get2Dcontextofcanvasanddrawrectangel\x0d\x0actx=canvas.getContext("2d")\x0d\x0actx.fillStyle="black"\x0d\x0actx.fillRect(0,0,canvas.width,canvas.height)\x0d\x0amyImage=document.createElement('img')\x0d\x0amyImage.src="../robin.png"\x0d\x0amyImage.onload=loaded()\x0d\x0a}\x0d\x0afunctionloaded(){\x0d\x0aimageReady=true\x0d\x0asetTimeout(update,1000ቺ)\x0d\x0a}\x0d\x0afunctionredraw(){\x0d\x0actx.clearRect(0,0,460,460)\x0d\x0actx.fillStyle="black"\x0d\x0actx.fillRect(0,0,460,460)\x0d\x0a//findtheindexofframesinimage\x0d\x0avarheight=myImage.naturalHeightǛ\x0d\x0avarwidth=myImage.naturalWidthǛ\x0d\x0avarrow=Math.floor(frameǛ)\x0d\x0avarcol=frame-row*5\x0d\x0avaroffw=col*width\x0d\x0avaroffh=row*height\x0d\x0a//firstrobin\x0d\x0apx=px-5\x0d\x0apy=py-5\x0d\x0aif(px
