利用canvas制作一个时钟
先上张效果图。
利用canvas来画出一个时钟，想想都是一件神奇又美妙的事情。话不多说，先上代码吧。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> <title>Document</title> <style> *{ padding:0;margin:0; } #canvas{ display:block; margin:0 auto; border:1px solid #aaa; background:#E1E1FF; } </style> </head> <body> <!--http://www.mamicode.com/info-detail-915112.html--> <!-- <div> /*步骤：画钟表整体思路步骤分析 1、使用canvas创建画布，并创建一个2d对象 2、使用function方法做计算 3、实例化Date()对象，通过该对象获取系统当前的时、分、秒 4、通过计算将24小时制转化为12小时制 5、画表盘 6、画刻度盘 7、画指针 8、使用setInterval(fun, time);设置动态 */ </div> --> <canvas id="canvas">你的浏览器不支持canvas!</canvas> <script> document.body.style.backgroundColor = '#eee'; var clockID = document.getElementById('canvas'); var clock = clockID.getContext('2d'); clockID.width = 1000; clockID.height = 800; function drawClock(id){ //每次清空画布 clock.clearRect(0,0,1000,1000); //获取系统时间 var now = new Date(); //实例化一个当前时间的对象，通过该对象获取系统当前时间 var secs =now.getSeconds(); //秒 var mins = now.getMinutes(); //分 var hours = now.getHours(); //时 //绘制文字，显示系统当前时间 clock.save(); clock.translate(0,500); //充值坐标原点 clock.fillStyle = '#ff0'; clock.strokeStyle = '#eee'; clock.font = 'bold 50px 微软雅黑'; clock.strokeText('系统当前时间为：'+hours+'时'+mins+'分'+secs+'秒',100,100); clock.fillText('系统当前时间为：'+hours+'时'+mins+'分'+secs+'秒',100,100); clock.restore(); //计算：满60分加一小时 hours = hours + mins/60; //计算：将24小时制转化为12小时制 hours = hours>12?hours-12:hours; //画表盘 clock.beginPath(); clock.lineWidth = 10; clock.strokeStyle = '#f0f'; clock.arc(300,300,200,0,360,false); clock.stroke(); clock.closePath(); //画刻度盘 //时刻度 for(var i=0;i<12;i++){ clock.save(); //将起始点定位到圆心 clock.translate(300,300); //设置刻度的样式 clock.lineWidth = 7; clock.strokeStyle = '#999'; //设置旋转角度 clock.rotate(i*30*Math.PI/180); clock.beginPath(); clock.moveTo(0,-170); clock.lineTo(0,-190); //画刻度线 clock.stroke(); clock.restore(); } //分刻度 for(var j=0;j<60;j++){ clock.save(); //设置起始点坐标 clock.translate(300,300); //重新设置圆心 clock.lineWidth = 5; clock.strokeStyle = '#999'; //设置旋转角度 clock.rotate(j*6*Math.PI/180); clock.beginPath(); clock.moveTo(0,-180); clock.lineTo(0,-190); clock.closePath(); clock.stroke(); clock.restore(); } //时针 clock.save(); clock.translate(300,300); //重新设置圆心 clock.lineWidth = 7; clock.strokeStyle = '#000'; //设置小时的旋转角度，每转一次走30度 clock.rotate(hours*30*Math.PI/180); clock.beginPath(); clock.moveTo(0,15); clock.lineTo(0,-120); clock.stroke(); clock.closePath(); clock.restore(); //分针 clock.save(); clock.translate(300,300); clock.rotate(mins*6*Math.PI); clock.lineWidth = 5; clock.strokeStyle = '#000'; clock.beginPath(); clock.moveTo(0,20); clock.lineTo(0,-160); clock.stroke(); clock.closePath(); clock.restore(); //秒针 clock.save(); clock.translate(300,300); clock.rotate(secs*6*Math.PI/180); clock.lineWidth = 3; clock.strokeStyle = '#f00'; clock.beginPath(); clock.moveTo(0,25); clock.lineTo(0,-165); clock.stroke(); clock.closePath(); //时钟圆心处画一个小圆 clock.fillStyle = '#999'; clock.strokeStyle = '#f00'; clock.beginPath(); clock.arc(0,0,6,0,360,false); clock.fill(); clock.stroke(); clock.closePath(); //秒针顶部一个小圈 clock.beginPath(); clock.arc(0,-140,6,0,360,false); clock.fill(); clock.stroke(); clock.closePath(); clock.restore(); } drawClock(); setInterval(drawClock,1000); </script> </body> </html>
下面来科普一些概念喽！！
save()保存当前画布环境状态
restore()返回之前保存的画布的路径状态，与save()成对用。
toDataURL()返回canvas图像的url
fillStyle()设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle()设置或返回用于笔触的颜色、渐变或模式
beginPath()开启画路径
closePath()关闭画路径
arc()画圆
fill()填充
stroke()画边框
暂时先列出这么多吧！！
