免费网站自动跳转,微做网站,管理系统怎么做,爱情链接这两天在看html5的canvas,实现了上面那个东西 需要注意的地方#xff1a; 1.canvas的sava()和restore()理解和使用 2.canvas的translate scale rotate ..的使用#xff0c;每个变化都应该清楚圆心和角度..看#xff1a;http://blog.sina.com.cn/s/blog_8fab526c01015tqs.htm… 这两天在看html5的canvas,实现了上面那个东西 需要注意的地方 1.canvas的sava()和restore()理解和使用 2.canvas的translate scale rotate ..的使用每个变化都应该清楚圆心和角度..看http://blog.sina.com.cn/s/blog_8fab526c01015tqs.html 3.自定义旋转transform方法实现数字的fillText View Code !DOCTYPE html
html
headmeta http-equivContent-Type contenttext/html; charsetutf-8 /titleCanvas Clock./titlescript srcjquery-1.7.1.min.js/script
/head
style typetext/css#canvasPanel{margin:0 auto;}#canvas{display: block;}
/style
body div idtimespan2013-05-11/span/divdiv idcanvasPanelcanvas idcanvas width300 height300 styleborder:1px solid #ccc;/canvas/divscript typetext/javascriptwindow.onload function(){clock();var timeInterval setInterval(clock,1000);};function clock(){var now new Date();var weekday{0:星期日,1:星期一,2:星期二,3:星期三,4:星期四,5:星期五,6:星期六};var sec now.getSeconds();var min now.getMinutes();var hr now.getHours();hr hr12 ? hr-12:hr;ctx document.getElementById(canvas).getContext(2d);ctx.save();ctx.clearRect(0,0,300,300);ctx.translate(150,150);ctx.scale(0.4,0.4);ctx.rotate(-Math.PI/2);
ctx.strokeStyle black;ctx.lineWidth 8;ctx.lineCap round;// 时间刻度ctx.save(); var x 0, y 0,angle Math.PI/30;ctx.rotate(Math.PI/2); //function transform ??function transform(ctx,x,y,angle,b){if(b){ctx.transform(Math.cos(angle), Math.sin(angle),-Math.sin(angle), Math.cos(angle),x*(1-Math.cos(angle)) x*Math.sin(angle),y*(1-Math.cos(angle)) - y*Math.sin(angle));}}for(var i0;i60;i){if(i%5 0){ctx.font 26px Arial;ctx.fillText(i/5 0 ? 12 : i/5,x-15,y-200);}transform(ctx,x,y,angle,true); }ctx.restore();ctx.save();ctx.beginPath();for(var i0;i12;i){ctx.rotate(Math.PI/6);ctx.moveTo(250,0);ctx.lineTo(270,0);}ctx.stroke();ctx.restore();ctx.save();ctx.lineWidth 5;ctx.beginPath();for(var i0;i60;i){if(i%5!0){ctx.moveTo(266,0);ctx.lineTo(270,0);}ctx.rotate(Math.PI/30);} ctx.stroke();ctx.restore();//draw the hour linectx.save();ctx.rotate((Math.PI/6)*hr(Math.PI/360)*min(Math.PI/21600)*sec);ctx.beginPath();ctx.moveTo(-20,0);ctx.lineTo(150,0);ctx.stroke();ctx.restore();//draw the min linectx.save();ctx.rotate((Math.PI/30)*hr(Math.PI/1800)*min);ctx.strokeStyle #fd4000;ctx.fillStyle #fd4000;ctx.lineWidth 6;ctx.beginPath();ctx.moveTo(-28,0);ctx.lineTo(200,0);ctx.stroke();ctx.restore();//draw the sec linectx.save();ctx.rotate((Math.PI/30)*sec);ctx.strokeStyle #D40000;ctx.fillStyle #d40000;ctx.lineWidth 6;ctx.beginPath();ctx.moveTo(-36,0);ctx.lineTo(160,0);ctx.stroke();ctx.restore();//draw the circlectx.save();ctx.lineWidth 4;ctx.strokeStyle 325fa2ctx.beginPath();ctx.arc(0,0,300,0,Math.PI*2,true);ctx.stroke();ctx.restore();//draw the middle circlectx.save();ctx.lineWidth 4;ctx.strokeStyle 325fa2;ctx.beginPath();ctx.arc(0,0,7,0,Math.PI*2,true);ctx.stroke();ctx.restore();//show time/*ctx.rotate(Math.PI/2);ctx.lineWidth 2;ctx.fillStyle red;hour now.getHours();var str hour 10 ? hour : (0hour):(min 10 ? min:(0min));ctx.font 18px;ctx.fillText(str,150,250);ctx.lineWidth 1; ctx.fillText(Lgm ZJ, 150, 270); */ctx.restore();var dateStringnow.getFullYear()年(now.getMonth()1)月now.getDate()日 weekday[now.getDay()] h:now.getHours() m:min s:sec;$(#time span).html(dateString);}/script
/body/html 转载于:https://www.cnblogs.com/lgmcolin/archive/2013/05/11/3073373.html
