canvas 時鐘
<div id="cnblogs_post_body"><div class="cnblogs_code"><!docytpe html><html><head><script src="http://files.cnblogs.com/skcleung/canvasproxy.js"></script><script>window.onload=function(){var PI=Math.PI, angle1s=PI/30, angle5s=PI/6, angle45=PI/2, angle360=PI*2;var cp=CanvasProxy(document.getElementById("myCanvas").getContext("2d"));cp.translate(200,200).rotate(-angle45).font("35px sans-serif").textBaseline('middle').textAlign('center');cp.background=function(){cp.clearRect(-200,-200,400,400).beginPath().arc(0,0,150,0,angle360).lineWidth(12).stroke().lineWidth(5);for (var i=1;i<13;i++){ cp.save().rotate(angle5s*i).translate(110,0).moveTo(20,0).lineTo(35,0).rotate(angle45-angle5s*i).fillText(i,0,0).restore();}cp.stroke();return cp;}clock();function clock(){var time=new Date();var sec=time.getSeconds()*angle1s;var min=time.getMinutes()*angle1s+sec/60;var hr=(time.getHours()%12)*angle5s+min/12;cp.background().save().shadowOffsetX(2).shadowOffsetY(2).shadowBlur(2).shadowColor("black").save().beginPath().lineWidth(8).rotate(hr).moveTo(0,0).lineTo(80,0).closePath().stroke().restore().save().beginPath().lineWidth(4).rotate(min).moveTo(0,0).lineTo(100,0).closePath().stroke().restore().save().beginPath().strokeStyle("red").lineWidth(2).rotate(sec).moveTo(-20,0).lineTo(120,0).closePath().stroke().restore().restore();}window.setInterval(clock,1000);}</script></head><body><canvas id="myCanvas" height=400 width=400 style="border:1px solid black"></canvas></body></html>
页:
[1]