如何制作html5的动画效果?

html-css07

如何制作html5的动画效果?,第1张

主要思想:\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

html5 导航路线效果:

调用核心代码:

<script type="text/javascript"> 

//默认地理位置设置为上海市浦东新区

var x=121.48789949,y=31.24916171

   window.onload = function() {  

       if(navigator.geolocation) {  

navigator.geolocation.getCurrentPosition(showPosition)

           document.getElementById("status").innerHTML = "HTML5 Geolocation is supported in your browser." 

               // 百度地图API功能  

               var map = new BMap.Map("container") 

               var point = new BMap.Point(x,y) 

               map.centerAndZoom(point,12) 

 

               var geolocation = new BMap.Geolocation() 

               geolocation.getCurrentPosition(function(r){  

                   if(this.getStatus() == BMAP_STATUS_SUCCESS){  

                       var mk = new BMap.Marker(r.point) 

                       map.addOverlay(mk) 

                       map.panTo(r.point) 

                   }  

                   else {  

                       alert('failed'+this.getStatus()) 

                   }          

               },{enableHighAccuracy: true})  

return

       }  

      alert("当前的浏览器不支持获取地理位置!")

   } 

function showPosition(position){

 x=position.coords.latitude

 y=position.coords.longitude

}

</script> 

运行效果如下: