html时钟.docVIP

!DOCTYPE HTML html head meta charset=UTF-8 meta content=yes name=apple-mobile-web-app-capable meta content=black name=apple-mobile-web-app-status-bar-style meta content=telephone=no name=format-detection meta name=viewport content=width=device-width,initial-scale=1 / meta name=format-detection content=telephone=no / meta name=viewport content=width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0 / !--禁止缩放-- style type=text/css #box{ width: 300px; position: relative; margin: 50px auto; height: 300px; } canvas{ position:absolute; top:0px; left:0px; } #imgdiv{ position: absolute; width: 100px; height: 100px; border-radius:50px; top:50%; left: 50%; margin-left: -50px; margin-top: -50px; position: absolute; overflow: hidden; } #imgdiv img{ display: block; width: 100%; min-height: 100%; } /style title时钟/title /head body div id=box canvas id=canvas width=300 height=300/canvas canvas class=process width=300 height=3000%/canvas canvas id=p_canvas width=300 height=300/canvas div id=imgdivimg src=mm1.jpg //div /div script type=text/javascript src=jquery-1.8.3.min.js/script script type=text/javascript //获取绘图对象 var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); var p_canvas = document.getElementById(p_canvas); var p_context = p_canvas.getContext(2d); var height=300,width=300; //画空心大圆 context.beginPath(); context.strokeStyle=#e0e0e0; context.arc(width/2,height/2,width/2-1,0,Math.PI*2,true); context.stroke(); context.closePath(); //话实心灰色圆 context.beginPath(); context.arc(width/2,height/2,width/2.2-1,0,360,false); context.fillStyle=#e0e0e0;//填充颜色,默认是黑色 context.fill();//画实心圆 context.closePath(); //画中间点 context.beginPath(); context.fillStyle=#000; context.arc(width/2,height/2,3,0,Math.PI*2,true); context.fill(); context.closePath(); //画小刻度