canvas实现时钟效果
2012-12-07 03:30
363 查看
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>时钟</title> </head> <body> <canvas id="clock" width="500" height="500" style="background-color:black;">你的浏览器不支持canvas</canvas> <script type="text/javascript"> var canvas = document.getElementById("clock"); var cxt = canvas.getContext("2d"); function drawClock() { var now = new Date(); var sec = now.getSeconds(); var min = now.getMinutes(); var hour = now.getHours(); hour > 12 ? hour - 12 : hour; hour += (min / 60); //先清空画布 cxt.clearRect(0, 0, canvas.width, canvas.height); //美女图片作为表盘背景 var img = new Image(); img.src = "http://i3.static.olcdn.com/cms/201303/14/MjMw1363244722894_500.jpg"; img.onload = function() { cxt.drawImage(img, 0, 50, canvas.width, 400); _innerDraw(); } function _innerDraw() { //画表盘大圆 圆心:x=250 y=250 cxt.strokeStyle = "#00FFFF"; cxt.lineWidth = 10; cxt.beginPath(); cxt.arc(250, 250, 200, 0, 2 * Math.PI, false); cxt.stroke(); cxt.closePath(); //时刻度 for (var i = 0; i < 12; i++) { cxt.save(); //保存当前状态 cxt.lineWidth = 7; cxt.strokeStyle = "#FFFF00"; //设置原点 cxt.translate(250, 250); //设置旋转角度 cxt.rotate(30 * i * Math.PI / 180); //弧度 角度*Math.PI/180 cxt.beginPath(); cxt.moveTo(0, -175); cxt.lineTo(0, -195); cxt.stroke(); cxt.closePath(); cxt.restore(); //把原来状态恢复回来 } //分刻度 for (var i = 0; i < 60; i++) { cxt.save(); cxt.lineWidth = 5; cxt.strokeStyle = "#FFFF00"; cxt.translate(250, 250); cxt.rotate(i * 6 * Math.PI / 180); cxt.beginPath(); cxt.moveTo(0, -185); cxt.lineTo(0, -195); cxt.stroke(); cxt.closePath(); cxt.restore(); } //以下的时针、分针、秒针均要转动,所以在这里要设置其异次元空间的位置 //根据当前的小时数、分钟数、秒数分别设置各个针的角度即可 //-----------------------------时针----------------------------- cxt.save(); cxt.lineWidth = 7; cxt.strokeStyle = "#00FFFF"; cxt.translate(250, 250); cxt.rotate(hour * 30 * Math.PI / 180); //每小时旋转30度 cxt.beginPath(); cxt.moveTo(0, -130); cxt.lineTo(0, 10); cxt.stroke(); cxt.closePath(); cxt.restore(); //-----------------------------分针----------------------------- cxt.save(); cxt.lineWidth = 5; cxt.strokeStyle = "#FFFF00"; cxt.translate(250, 250); cxt.rotate(min * 6 * Math.PI / 180); //每分钟旋转6度 cxt.beginPath(); cxt.moveTo(0, -150); cxt.lineTo(0, 10); cxt.stroke(); cxt.closePath(); cxt.restore(); //-----------------------------秒针----------------------------- cxt.save(); cxt.lineWidth = 3; cxt.strokeStyle = "#FF0000"; cxt.translate(250, 250); cxt.rotate(sec * 6 * Math.PI / 180); //每秒旋转6度 cxt.beginPath(); cxt.moveTo(0, -170); cxt.lineTo(0, 10); cxt.stroke(); cxt.closePath(); //美化表盘,画中间的小圆 cxt.beginPath(); cxt.arc(0, 0, 7, 0, 360 * Math.PI / 180); cxt.fillStyle = "#FFFF00"; cxt.fill(); cxt.strokeStyle = "#FF0000"; cxt.stroke(); cxt.closePath(); //秒针上的小圆 cxt.beginPath(); cxt.arc(0, -140, 7, 0, 360 * Math.PI / 180); cxt.fillStyle = "#FFFF00"; cxt.fill(); cxt.stroke(); cxt.closePath(); cxt.restore(); //显示时间 cxt.font = "normal 18px microsoft yahei"; cxt.lineWidth = 2; cxt.fillStyle = "#0000FF"; hour = now.getHours(); var str = (hour > 10 ? hour : ("0" + hour)) + ":" + (min > 10 ? min : ("0" + min)); cxt.fillText(str, 225, 380); //中国制造 cxt.font = "bold 12px simsun"; cxt.lineWidth = 1; cxt.fillText("Made In China", 210, 400); } } drawClock(); setInterval(drawClock, 1000); </script> </body> </html>
相关文章推荐
- 用HTML5的canvas实现一个炫酷时钟效果
- Canvas画布实现自定义时钟效果
- canvas实现和时钟效果
- canvas实现简易时钟效果
- canvas实现简易时钟效果
- canvas实现的时钟效果
- JS+H5 Canvas实现时钟效果
- canvas实现粒子时钟效果
- canvas实现的喜羊羊图像效果
- Android自定义View实现时钟效果ClockView
- canvas绚丽的时钟效果(上)
- React实现时钟效果
- JS+Canvas绘制动态时钟效果
- 用HTML5的canvas实现抽奖刮刮卡的效果(只需十几行代码)
- Canvas实现绚丽的倒计时效果(动画效果)
- 【Android界面实现】使用Canvas对象实现“刮刮乐”效果
- canvas实现粒子涂鸦效果
- JS 实现倒计时数字时钟效果【附实例代码】
- 【Android界面实现】使用Canvas对象实现“刮刮乐”效果