基于Canvas的时钟
2011-07-27 01:25
274 查看
效果比较简单,没有放满各个时刻(网上这类例子很多)
这里有一点取巧:画完外圈圆、内圈圆后,将原点(默认为0,0)转换为圆的中心点,这样的话,只需要知道角度,在已知时针、分针、秒针它的长度情况下,很容易求出对应的坐标(x, y)
在求的时候需要注意的是,先要将得到的弧度 – 1/2*Math.PI,以时针为例,一圈分为12个刻度,那么1个小时对应的弧度为 hour * 30 * Math.PI / 180 – 1/2*Math.PI。
完整的示例代码:
[/code]
在线运行示例:
Canvas Clock
* {margin:0; padding:0;}
body {background-color:#fff; font-size:12px; font-family:arial, sans-serif;}
您当前使用的浏览器不支持Canvas
var clock = document.getElementById("clock");
var ctx = null;
function drawClock() {
var radius = 100;
var hourWidth = 60;
var minutesWidth = 80;
var secondsWidth = 90;
var date = new Date();
var hour = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
if (hour > 12) {
hour -= 12;
}
var hourAngle = (hour * 30 - 90) * Math.PI / 180;
var minutesAngle = (minutes * 6 - 90) * Math.PI / 180;
var secondsAngle = (seconds * 6 - 90) * Math.PI / 180;
//console.log(hour + ":" + minutes + ":" + seconds);
ctx = clock.getContext("2d");
ctx.save();
ctx.translate(0, 0);
ctx.clearRect(0, 0, clock.width, clock.height);
ctx.strokeStyle = "black";
ctx.save();
//绘制路径
ctx.beginPath();
//绘制外圈
ctx.arc(200, 200, 99, 0, 2*Math.PI, false);
//绘制内圈
ctx.moveTo(295, 200);
ctx.arc(200, 200, 95, 0, 2*Math.PI, false);
//路径描边
ctx.stroke();
ctx.restore();
ctx.save();
ctx.translate(200, 200);
ctx.font = "bold 10px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("12", 0, -88);
ctx.fillText("3", 88, 0);
ctx.fillText("6", 0, 88);
ctx.fillText("9", -88, 0);
ctx.stroke();
ctx.restore();
//绘制时针 长度为80px
ctx.save();
ctx.beginPath();
ctx.translate(200, 200);
ctx.strokeStyle = "green";
ctx.moveTo(0, 0);
ctx.lineTo(hourWidth * Math.cos(hourAngle), hourWidth * Math.sin(hourAngle));
ctx.stroke();
ctx.restore();
//绘制分针 长度为60px
ctx.save();
ctx.beginPath();
ctx.translate(200, 200);
ctx.strokeStyle = "blue";
ctx.moveTo(0, 0);
ctx.lineTo(minutesWidth * Math.cos(minutesAngle), minutesWidth * Math.sin(minutesAngle));
ctx.stroke();
ctx.restore();
//绘制秒针 长度为90
ctx.save();
ctx.translate(200, 200);
ctx.strokeStyle = "red";
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(secondsWidth * Math.cos(secondsAngle), secondsWidth * Math.sin(secondsAngle));
ctx.stroke();
ctx.restore();
}
if (clock.getContext) {
drawClock();
setInterval(drawClock, 1000);
}
预览代码
这里有一点取巧:画完外圈圆、内圈圆后,将原点(默认为0,0)转换为圆的中心点,这样的话,只需要知道角度,在已知时针、分针、秒针它的长度情况下,很容易求出对应的坐标(x, y)
在求的时候需要注意的是,先要将得到的弧度 – 1/2*Math.PI,以时针为例,一圈分为12个刻度,那么1个小时对应的弧度为 hour * 30 * Math.PI / 180 – 1/2*Math.PI。
完整的示例代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Canvas Clock</title> <style type="text/css"> * {margin:0; padding:0;} body {background-color:#fff; font-size:12px; font-family:arial, sans-serif;} </style> </head> <body> <canvas id="clock" width="300" height="300"> 您当前使用的浏览器不支持Canvas </canvas> <script type="text/javascript"> var clock = document.getElementById("clock"); var ctx = null; function drawClock() { var radius = 100; var hourWidth = 60; var minutesWidth = 80; var secondsWidth = 90; var date = new Date(); var hour = date.getHours(); var minutes = date.getMinutes(); var seconds = date.getSeconds(); if (hour > 12) { hour -= 12; } var hourAngle = (hour * 30 - 90) * Math.PI / 180; var minutesAngle = (minutes * 6 - 90) * Math.PI / 180; var secondsAngle = (seconds * 6 - 90) * Math.PI / 180; //console.log(hour + ":" + minutes + ":" + seconds); ctx = clock.getContext("2d"); ctx.save(); ctx.translate(0, 0); ctx.clearRect(0, 0, clock.width, clock.height); ctx.strokeStyle = "black"; ctx.save(); //绘制路径 ctx.beginPath(); //绘制外圈 ctx.arc(200, 200, 99, 0, 2*Math.PI, false); //绘制内圈 ctx.moveTo(295, 200); ctx.arc(200, 200, 95, 0, 2*Math.PI, false); //路径描边 ctx.stroke(); ctx.restore(); ctx.save(); ctx.translate(200, 200); ctx.font = "bold 10px Arial"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText("12", 0, -88); ctx.fillText("3", 88, 0); ctx.fillText("6", 0, 88); ctx.fillText("9", -88, 0); ctx.stroke(); ctx.restore(); //绘制时针 长度为80px ctx.save(); ctx.beginPath(); ctx.translate(200, 200); ctx.strokeStyle = "green"; ctx.moveTo(0, 0); ctx.lineTo(hourWidth * Math.cos(hourAngle), hourWidth * Math.sin(hourAngle)); ctx.stroke(); ctx.restore(); //绘制分针 长度为60px ctx.save(); ctx.beginPath(); ctx.translate(200, 200); ctx.strokeStyle = "blue"; ctx.moveTo(0, 0); ctx.lineTo(minutesWidth * Math.cos(minutesAngle), minutesWidth * Math.sin(minutesAngle)); ctx.stroke(); ctx.restore(); //绘制秒针 长度为90 ctx.save(); ctx.translate(200, 200); ctx.strokeStyle = "red"; ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(secondsWidth * Math.cos(secondsAngle), secondsWidth * Math.sin(secondsAngle)); ctx.stroke(); ctx.restore(); } if (clock.getContext) { drawClock(); setInterval(drawClock, 1000); } </script> </body> </html>
[/code]
在线运行示例:
Canvas Clock
* {margin:0; padding:0;}
body {background-color:#fff; font-size:12px; font-family:arial, sans-serif;}
您当前使用的浏览器不支持Canvas
var clock = document.getElementById("clock");
var ctx = null;
function drawClock() {
var radius = 100;
var hourWidth = 60;
var minutesWidth = 80;
var secondsWidth = 90;
var date = new Date();
var hour = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
if (hour > 12) {
hour -= 12;
}
var hourAngle = (hour * 30 - 90) * Math.PI / 180;
var minutesAngle = (minutes * 6 - 90) * Math.PI / 180;
var secondsAngle = (seconds * 6 - 90) * Math.PI / 180;
//console.log(hour + ":" + minutes + ":" + seconds);
ctx = clock.getContext("2d");
ctx.save();
ctx.translate(0, 0);
ctx.clearRect(0, 0, clock.width, clock.height);
ctx.strokeStyle = "black";
ctx.save();
//绘制路径
ctx.beginPath();
//绘制外圈
ctx.arc(200, 200, 99, 0, 2*Math.PI, false);
//绘制内圈
ctx.moveTo(295, 200);
ctx.arc(200, 200, 95, 0, 2*Math.PI, false);
//路径描边
ctx.stroke();
ctx.restore();
ctx.save();
ctx.translate(200, 200);
ctx.font = "bold 10px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("12", 0, -88);
ctx.fillText("3", 88, 0);
ctx.fillText("6", 0, 88);
ctx.fillText("9", -88, 0);
ctx.stroke();
ctx.restore();
//绘制时针 长度为80px
ctx.save();
ctx.beginPath();
ctx.translate(200, 200);
ctx.strokeStyle = "green";
ctx.moveTo(0, 0);
ctx.lineTo(hourWidth * Math.cos(hourAngle), hourWidth * Math.sin(hourAngle));
ctx.stroke();
ctx.restore();
//绘制分针 长度为60px
ctx.save();
ctx.beginPath();
ctx.translate(200, 200);
ctx.strokeStyle = "blue";
ctx.moveTo(0, 0);
ctx.lineTo(minutesWidth * Math.cos(minutesAngle), minutesWidth * Math.sin(minutesAngle));
ctx.stroke();
ctx.restore();
//绘制秒针 长度为90
ctx.save();
ctx.translate(200, 200);
ctx.strokeStyle = "red";
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(secondsWidth * Math.cos(secondsAngle), secondsWidth * Math.sin(secondsAngle));
ctx.stroke();
ctx.restore();
}
if (clock.getContext) {
drawClock();
setInterval(drawClock, 1000);
}
预览代码
相关文章推荐
- 基于canvas的原生JS时钟效果
- 推荐18个基于HTML5 Canvas 开发的图表库
- html5 canvas 画的简易时钟
- 基于 HTML5 Canvas 绘制的电信网络拓扑图
- 推荐18个基于 HTML5 Canvas 开发的图表库
- 基于canvas使用贝塞尔曲线平滑拟合折线段
- canvas标签结合javascript做出动态时钟效果
- 前端(canvas)圆形网页时钟实现,源码
- 基于S3C2440的Linux-3.6.6移植——实时时钟RTC
- 使用canvas绘制时钟
- html5学习(一)--canvas画时钟
- canvas绘制精细走动时钟
- 基于FPGA的VHDL时钟程序
- 环形进度条的实现方法总结和动态时钟绘制(CSS3、SVG、Canvas)
- canvas_时钟
- HTML5的绝活:巧用Canvas制作会动的时钟
- 玩转html5(四)----使用canvas画一个时钟(可以动的哦!)
- Canvas绘制时钟(学习笔记)
- 基于 HTML5 Canvas 的交互式地铁线路图
- 下篇--ARM时钟初始化--配置时钟(基于ok6410)--国嵌第三季-专题7