标签:style blog http 使用 os width
先给个效果图,我画的比较丑,大家可以自己美化一下,
直接上代码:
<!DOCTYPE html> <meta charset="utf-8"> <html> <body> <canvas width="500" height="500" id="clock" > 您的浏览器不支持canvas </canvas> <script> //获取画布 var clock=document.getElementById(‘clock‘); //设置绘图环境 var cxt=clock.getContext(‘2d‘); function drawClock(){ //清除画布 cxt.clearRect(0,0,500,500); //获取时间, var now =new Date(); var second =now.getSeconds(); var minute =now.getMinutes(); var hour1 =now.getHours(); //将24小时进制转为12小时,且为浮点型 var hour=hour1+minute/60; hour=hour>12 ?hour-12:hour; //获取全部时间 var time=now.toLocaleString( ); //表盘 //开始新路径 cxt.beginPath(); cxt.lineWidth=8; cxt.strokeStyle="blue"; //路径函数 x,y,r,角度范围,顺时针/逆时针 cxt.arc(250,250,200,0,360,false); cxt.stroke(); cxt.closePath(); //刻度,利用旋转 //时刻度 for(var i=0;i<12;i++){ //保存当前状态 cxt.save(); //刻度粗细 cxt.lineWidth=5; //刻度颜色 cxt.strokeStyle="black" //设置00点,以画布中心为00 cxt.translate(250,250); //设置旋转角度 参数是弧度,角度 0--360 弧度角度*Math.PI/180 cxt.rotate(i*30*Math.PI/180); cxt.beginPath(); //刻度起始点 cxt.moveTo(0,-180); //刻度结束点 cxt.lineTo(0,-195); cxt.closePath(); cxt.stroke(); //将旋转后的图片返回原画布 cxt.restore(); } //分刻度 for(var i=0;i<60;i++){ //保存当前状态 cxt.save(); //刻度粗细 cxt.lineWidth=3; //刻度颜色 cxt.strokeStyle="black" //设置00点,以画布中心为00 cxt.translate(250,250); //设置旋转角度 参数是弧度,角度 0--360 弧度角度*Math.PI/180 cxt.rotate(i*6*Math.PI/180); cxt.beginPath(); //起始点 cxt.moveTo(0,-188); cxt.lineTo(0,-195); cxt.closePath(); cxt.stroke(); //将旋转后的图片返回原画布 cxt.restore(); } //表盘中心 cxt.beginPath(); cxt.lineWidth=1; cxt.strokeStyle="red"; cxt.fillStyle="red"; //路径函数 x,y,r,角度范围,顺时针/逆时针 cxt.arc(250,250,4,0,360,false); cxt.fill(); cxt.stroke(); cxt.closePath(); //时针 //保存当前状态 cxt.save(); cxt.lineWidth=5; cxt.strokeStyle="black"; //设置异次元空间00点 cxt.translate(250,250); //设置旋转角度 参数是弧度,角度 0--360 弧度角度*Math.PI/180 cxt.rotate(hour*30*Math.PI/180); cxt.beginPath(); cxt.moveTo(0,-120); cxt.lineTo(0,10); cxt.closePath(); cxt.stroke(); cxt.restore(); //分针 cxt.save(); cxt.lineWidth="3"; cxt.strokeStyle="black"; cxt.translate(250,250); cxt.rotate(minute*6*Math.PI/180); cxt.beginPath(); cxt.moveTo(0,-150); cxt.lineTo(0,15); cxt.closePath(); cxt.stroke(); cxt.restore(); //秒针 cxt.save(); cxt.lineWidth="1.5"; cxt.strokeStyle="red"; cxt.translate(250,250); cxt.rotate(second*6*Math.PI/180); cxt.beginPath(); cxt.moveTo(0,-160); cxt.lineTo(0,20); cxt.closePath(); cxt.stroke(); //秒针前端小点 cxt.beginPath(); //外环为红色 cxt.strokeStyle="red"; //灰色填充 cxt.fillStyle="gray"; cxt.arc(0,-145,4,0,360,false); cxt.fill(); cxt.closePath(); cxt.stroke(); cxt.restore(); //表盘中心 cxt.beginPath(); cxt.lineWidth=1; //外环为红色 cxt.strokeStyle="red"; //灰色填充 cxt.fillStyle="gray"; //路径函数 x,y,r,角度范围,顺时针/逆时针 cxt.arc(250,250,4,0,360,false); cxt.fill(); cxt.stroke(); cxt.closePath(); //写时间 cxt.font="15px 黑体 "; cxt.fillStyle="black"; //实心字 cxt.fillText(time,160,150); } //使用setInterval(代码,毫秒时间)使时钟转起来; drawClock(); setInterval(drawClock,1000); </script> </body> </html>
玩转html5(四)----使用canvas画一个时钟(可以动的哦!),码迷,mamicode.com
玩转html5(四)----使用canvas画一个时钟(可以动的哦!)
标签:style blog http 使用 os width
原文地址:http://blog.csdn.net/u012116457/article/details/24738585