用canvas画一个简单的时钟。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>clock</title>
<style type="text/css">
div{
text-align: center;
}
</style>
</head>
<body>
<div>
<canvas id="canvas" width="400px" height="400px"></canvas>
</div>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var w = canvas.width;
var h = canvas.height;
var r = w/2;
function fun () {
context.save();
context.translate(r,r);
context.beginPath();
context.strokeStyle = "black";
//对齐数字
context.textAlign = "center";
context.textBaseline = "middle";
// context.strokeStyle = "rgb("+ a +","+b+","+c+")";
var gard=context.createLinearGradient(0,-r,0,r);
gard.addColorStop(0,"rgb("+ Math.floor(Math.random()*256) +","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")");
gard.addColorStop(0.2,"rgb("+ Math.floor(Math.random()*256) +","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")");
gard.addColorStop(0.3,"rgb("+ Math.floor(Math.random()*256) +","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")");
gard.addColorStop(0.4,"rgb("+ Math.floor(Math.random()*256) +","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")");
gard.addColorStop(0.5,"rgb("+ Math.floor(Math.random()*256) +","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")");
gard.addColorStop(0.6,"rgb("+ Math.floor(Math.random()*256) +","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")");
gard.addColorStop(0.7,"rgb("+ Math.floor(Math.random()*256) +","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")");
gard.addColorStop(0.8,"rgb("+ Math.floor(Math.random()*256) +","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")");
gard.addColorStop(1,"rgb("+ Math.floor(Math.random()*256) +","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")");
context.strokeStyle = gard;
context.lineWidth = 10;
context.arc(0,0,r-5,0,Math.PI*2,false)
context.closePath();
context.stroke();
//首先，用一个数组将所有的小时数存放起来
var hoursnum = [3,4,5,6,7,8,9,10,11,12,1,2];
for (var i=0;i<hoursnum.length;i++) {
//首先得把弧度确定出来
var rad = (Math.PI*2)/12 * i;
//然后确定小时数的对应在重新映射画布里的坐标
var x = Math.cos(rad) * (r-30);
var y = Math.sin(rad) * (r-30);
//输出
context.fillText(hoursnum[i],x,y);
}
//绘制60个计时点
for (var j=0;j<60;j++) {
//首先得把弧度确定出来
var rad = (Math.PI*2)/60 * j;
//然后确定小时数的对应在重新映射画布里的坐标
var x = Math.cos(rad) * (r-18); // 邻边/斜边
var y = Math.sin(rad) * (r-18); // 对边/斜边
context.beginPath();
if (j%5 == 0) {
context.fillStyle = "black";
context.arc(x,y,2,0,Math.PI*2,false);
} else{
context.fillStyle = "bisque";
context.arc(x,y,2,0,Math.PI*2,false);
}
//输出
context.closePath();
context.fill();
}
}
//绘制时针
function drawhours (hour,minus) {
context.save(); // 保存当前环境的状态
context.beginPath();
// rotate(angle) 方法旋转当前的绘图 , 传递的参数为弧度;
var rad = Math.PI*2/12 *hour;
var radm = Math.PI*2/12/60 *minus;
context.rotate(rad);
context.lineWidth = 6;
context.lineCap = "round";
context.moveTo(0,10);
context.lineTo(0,-(r/2-15));
context.stroke();
context.restore(); //返回之前保存过的路径状态和属性
}
// drawhours(3,30); 测试方法
//绘制分针
function drawminus (minus) {
context.save();
context.beginPath();
var rad = Math.PI*2/60 *minus;
context.rotate(rad); //W3C: 设置线条的圆角
context.lineWidth = 4;
context.lineCap = "round";
context.moveTo(0,10);
context.lineTo(0,-(r-45));
// context.closePath();
context.stroke();
context.restore();
}
// drawminus(30);
//绘制秒针
function drawseco (seco) {
context.save();//保存
context.beginPath();
// context.strokeStyle = "red";
var rad = Math.PI*2/60 *seco;
context.rotate(rad); //W3C: 设置线条的圆角
context.lineWidth = 4;
context.lineCap = "round";
context.moveTo(2,15);
context.lineTo(0,-(r-45));
context.lineTo(-2,15);
context.lineTo(1,15);
context.closePath();
context.stroke();
context.restore();
}
// drawseco(55);
//绘制原点
function drawDot () {
context.beginPath();
context.font = "30px arial"
context.fillStyle = "#000";
context.arc(0,0,5,0,Math.PI*2,false);
context.closePath();
context.fill();
}
// drawDot();
//改变秒针原点色
function secoColor () {
var time = new Date();
var s = time.getSeconds();
for (var j=0;j<=s;j++) {
var rad = (Math.PI*2)/60 * (j-15);
var x = Math.cos(rad) * (r-18);
var y = Math.sin(rad) * (r-18);
var a = Math.floor(Math.random()*256);
var b = Math.floor(Math.random()*256);
var c = Math.floor(Math.random()*256);
context.save();
context.beginPath();
context.fillStyle = "rgb("+a +","+ b +","+c+")";
context.arc(x,y,4,0,Math.PI*2,false);
context.closePath();
context.fill();
context.restore();
}
function fun1 () {
var time = new Date();
var s = time.getSeconds();
for (var h=0;h<s;h++) {
var a = Math.floor(Math.random()*256);
var b = Math.floor(Math.random()*256);
var c = Math.floor(Math.random()*256);
var rr = 0;
// context.save();
context.beginPath();
context.fillStyle = "rgb("+a +","+ b +","+c+")";
rr = h + 15;
context.arc(0,0,rr+10,0,Math.PI*2,false);
context.closePath();
context.fill();
}
}
fun1();
}
//写方法，使时钟动起来
setInterval(function () {
context.clearRect(0,0,w,h);
var datenow = new Date();
var hour = datenow.getHours();
var minu = datenow.getMinutes();
var seco = datenow.getSeconds();
//测试用代码： var hour = 5;
// var minu = 30;
// var seco = 5;
var hourtext;
var minutext;
var secotext;
fun();
secoColor();
// fun11();
drawhours(hour,minu);
drawminus(minu);
drawseco(seco);
drawDot();
//小时
if(hour<10){
hourtext = "0" + hour;
}else{
hourtext = hour;
}
//分钟
if(minu<10){
minutext = "0" + minu;
}else{
minutext = minu;
}
//秒钟
if(seco<10){
secotext = "0" + seco;
}else{
secotext = seco;
}
context.fillText( hourtext +":"+minutext+":"+secotext, 0, 100);
context.restore();
},1000)
</script>
</body>
</html>