示例1：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas_time</title>
<style type="text/css">
div {
text-align: center;
margin-top: 50px;
}
#clock {
border: 1px solid #cccccc;
}
</style>
</head>
<body>
<div>
<canvas id="clock" height="300px" width="300px"></canvas>
</div>
<script type="text/JavaScript" >
var dom = document.getElementById('clock');
var ctx = dom.getContext('2d');
var width = ctx.canvas.width;
var height = ctx.canvas.height;
var r = width / 2;
var rem = width/200;
function drawBackground() {
ctx.save(); //存储当前环境变量；
ctx.translate(r, r); //重置坐标到r，r
ctx.beginPath(); // 起始一条路径
ctx.lineWidth = 10*rem; //设置线宽10；
ctx.arc(0, 0, r - ctx.lineWidth /2, 0, 2 * Math.PI, false);
ctx.stroke();
var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2]; //定义数组
ctx.font = 18*rem+"px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
hourNumbers.forEach(function(number, i) {
var rad = 2 * Math.PI / 12 * i;
var x = Math.cos(rad) * (r - 30*rem);
var y = Math.sin(rad) * (r - 30*rem);
ctx.fillText(number, x, y);
});
for (var i = 0; i < 60; i++) {
var rad = 2 * Math.PI / 60 * i;
var x = Math.cos(rad) * (r - 18*rem);
var y = Math.sin(rad) * (r - 18*rem);
ctx.beginPath();
if (i % 5 === 0) {
ctx.arc(x, y, 2*rem, 0, 2 * Math.PI, false);
ctx.fillStyle = "#000";
} else {
ctx.arc(x, y, 2*rem, 0, 2 * Math.PI, false);
ctx.fillStyle = "#ccc";
}
ctx.fill();
}
}
function drawHour(hour, minute) {
ctx.save();
ctx.beginPath();
var rad = 2 * Math.PI / 12 * hour;
var mrad = 2 * Math.PI / 12 / 60 * minute;
ctx.rotate(rad + mrad);
ctx.lineWidth = 6*rem;
ctx.lineCap = "round";
ctx.moveTo(0, 10*rem);
ctx.lineTo(0, -r / 2);
ctx.stroke();
ctx.restore();
}
function drawMinute(minute) {
ctx.save();
ctx.beginPath();
var rad = 2 * Math.PI / 60 * minute;
ctx.rotate(rad);
ctx.lineWidth = 3*rem;
ctx.lineCap = "round";
ctx.moveTo(0, 10*rem);
ctx.lineTo(0, -r + 30*rem);
ctx.stroke();
ctx.restore();
}
function drawSecond(second) {
ctx.save();
ctx.beginPath();
ctx.fillStyle = 'red';
var rad = 2 * Math.PI / 60 * second;
ctx.rotate(rad);
ctx.moveTo(-2*rem, 20*rem);
ctx.lineTo(2*rem, 20*rem);
ctx.lineTo(1, -r + 16*rem);
ctx.lineTo(-1, -r + 16*rem);
ctx.fill();
ctx.restore();
}
function drawDot() {
ctx.beginPath();
ctx.fillStyle = '#fff';
ctx.arc(0, 0, 3*rem, 0, 2 * Math.PI, false);
ctx.fill();
}
function draw01() {
ctx.clearRect(0, 0, width, height);
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
drawBackground();
drawHour(hour, minute);
drawMinute(minute);
drawSecond(second);
drawDot();
ctx.restore();
}
draw01();
setInterval(draw01, 1000);
</script>
</body>
</html>
示例2：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>带日期的时钟</title>
<style>
h1 {
text-align: center;
}
div {
width: 400px;
height: 400px;
margin: 10px auto;
padding: 0;
}
</style>
</head>
<body>
<div>
<canvas id="c1" width="400px" height="400px">
</canvas>
</div>
<script type="text/javascript">
var clock = document.getElementById("c1").getContext("2d");
// var clock = $("#huabu").get(0).getContext("2d"); //$中使用画布
function play() {
clock.clearRect(0, 0, 400, 400);
clock.save();
clock.translate(200, 200); //把画布中心转移到canvas中间
biaopan();
run();
clock.restore();
}
setInterval(function() {
play();
}, 1000);
function biaopan() {
//绘制表盘
clock.strokeStyle = " #9932CC";
clock.lineWidth = 5;
clock.beginPath();
clock.arc(0, 0, 195, 0, 2 * Math.PI);
clock.stroke();
//刻度(小时)
clock.strokeStyle = "#9932CC";
clock.lineWidth = 5;
for(var i = 0; i < 12; i++) {
clock.beginPath();
clock.moveTo(0, -190);
clock.lineTo(0, -170);
clock.stroke();
clock.rotate(2 * Math.PI / 12);
}
//刻度(分钟)
clock.strokeStyle = "#9932CC";
clock.lineWidth = 3;
for(var i = 0; i < 60; i++) {
clock.beginPath();
clock.moveTo(0, -190);
clock.lineTo(0, -180);
clock.stroke();
clock.rotate(2 * Math.PI / 60);
}
//绘制文字
clock.textAlign = "center";
clock.textBaseline = "middle";
clock.fillStyle = "#6495ED";
clock.font = "20px 微软雅黑"
for(var i = 1; i < 13; i++) {
clock.fillText(i,Math.sin(2*Math.PI /12*i)*150,Math.cos(2*Math.PI/12*i)*-150);
}
}
function run() {
var date = new Date();
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
// if(h > 12) {
// h = h - 12;
// }
//日期
var week = date.getDay();
var month = date.getMonth() + 1;
var day = date.getDate();
switch (week){
case 1: week = "星期一";
break;
case 2: week = "星期二";
break;
case 3: week = "星期三";
break;
case 4: week = "星期四";
break;
case 5: week = "星期五";
break;
case 6: week = "星期六";
break;
default: week = "星期天";
break;
}
clock.save();
clock.textAlign = "center";
clock.textBaseline = "middle";
clock.fillStyle = "black";
clock.font = "16px"
clock.fillText(week,-2,-118);
clock.fillText(month+" 月",-90,2);
clock.fillText(day+" 号",90,0);
clock.stroke();
clock.restore();
//时针
//分针60格 分针5格
clock.save();
clock.rotate(2 * Math.PI / 12 * h + (2 * Math.PI / 60 * m + 2 * Math.PI / 60 * s / 60) / 12);
clock.strokeStyle = "black";
clock.lineWidth = 7;
clock.beginPath();
clock.moveTo(0, 0);
clock.lineTo(0, -80);
clock.lineCap = "round";
clock.stroke();
clock.restore();
//分针
//秒针60格 分针一格
clock.save();
clock.beginPath();
clock.strokeStyle = "#D2691E";
clock.lineWidth = 5;
clock.rotate(2 * Math.PI / 60 * m + 2 * Math.PI / 60 * s / 60);
clock.moveTo(0, 0);
clock.lineTo(0, -110);
clock.lineCap = "round";
clock.stroke();
clock.restore();
//秒针
clock.strokeStyle = "red";
clock.rotate(2 * Math.PI / 60 * s);
clock.lineWidth = 4;
clock.beginPath();
clock.moveTo(0, 0);
clock.lineTo(0, -120);
clock.lineCap = "round";
clock.stroke();
//中心
clock.fillStyle = " #CCFFFF";
clock.lineWidth = 5;
clock.beginPath();
clock.arc(0, 0, 10, 0, 2 * Math.PI);
clock.fill();
clock.strokeStyle = "cadetblue";
clock.stroke();
}
</script>
</body>
</html>
转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 vault@coolxy.cn
