简单动态时钟,script写的,颜色可按照自己的爱好进行调试,html5 canvas制作彩色的钟表
var canvasText = document.getElementsByTagName("canvas")[0].getContext("2d");
var shizhong = function() {
//清除画布
canvasText.clearRect(0, 0, 1300, 600);
// var imgNode = document.getElementById("beijing")
// canvasText.drawImage(imgNode,0,0,1300,600,0,0,1300,600);
var a = canvasText.createLinearGradient(200, 0, 0, 400);
a.addColorStop("0", "red");
a.addColorStop("0.2", "orange");
a.addColorStop("0.4", "yellow");
a.addColorStop("0.6", "green");
a.addColorStop("0.8", "blue");
a.addColorStop("1", "purple");
canvasText.save();
canvasText.fillStyle = a;
canvasText.beginPath();
canvasText.arc(650, 300, 200, 0, 360, false);
canvasText.fill();
canvasText.closePath();
canvasText.restore();
//外圈
canvasText.strokeStyle = "fuchsia";
canvasText.lineWidth = 10;
canvasText.beginPath();
canvasText.arc(650, 300, 200, 0, Math.PI * 2, true);
canvasText.closePath();
canvasText.stroke();
//时间
var now = new Date();
var s = now.getSeconds();
var m = now.getMinutes();
var h = now.getHours();
h = h + m / 60;
h = (h > 12) ? (h - 12) : h;
//时刻度
for (i = 0; i < 12; i++) {
canvasText.save();
canvasText.lineWidth = 7;
canvasText.strokeStyle = "yellow"
canvasText.translate(650, 300)
canvasText.rotate(i * 30 * Math.PI / 180);
canvasText.beginPath();
canvasText.moveTo(0, -170);
canvasText.lineTo(0, -191);
canvasText.stroke();
canvasText.closePath();
canvasText.restore();
}
//秒刻度
for (i = 0; i < 60; i++) {
canvasText.save();
canvasText.lineWidth = 5;
canvasText.strokeStyle = "green";
canvasText.translate(650, 300);
canvasText.rotate(i * 6 * Math.PI / 180);
canvasText.beginPath();
canvasText.moveTo(0, -180);
canvasText.lineTo(0, -190);
canvasText.stroke();
canvasText.closePath();
canvasText.restore();
}
//数字
canvasText.font = '30px 黑体';
canvasText.fillStyle = 'black';
canvasText.textAlign = 'center';
canvasText.textBaseline = 'middle';
for (var n = 1; n <= 12; n++) {
var theta = (n - 3) * (Math.PI * 2) / 12;
var x = 250 * 0.61 * Math.cos(theta);
var y = 250 * 0.61 * Math.sin(theta);
canvasText.save();
canvasText.lineWidth = 5;
canvasText.translate(650, 300);
canvasText.beginPath();
canvasText.fillText(n, x, y);
canvasText.closePath();
canvasText.restore();
}
canvasText.save();
//时针
canvasText.lineWidth = 10;
//设置时针的颜色
canvasText.strokeStyle = "black";
//设置表心空间的0,0点
canvasText.translate(650, 300);
//设置旋转的角度
canvasText.rotate(h * 30 * Math.PI / 180);
//开始绘制
canvasText.beginPath();
canvasText.moveTo(0, -100);
canvasText.lineTo(0, 10);
canvasText.stroke();
canvasText.closePath();
canvasText.restore();
//分针
canvasText.save();
//设置分针的风格
canvasText.lineWidth = 5;
canvasText.strokeStyle = "black";
//设置表心空间分针画布的圆心
canvasText.translate(650, 300);
//设置旋转角度
canvasText.rotate(m * 6 * Math.PI / 180);
//开始绘制
canvasText.beginPath();
canvasText.moveTo(0, -140);
canvasText.lineTo(0, 15);
canvasText.stroke();
canvasText.closePath();
canvasText.restore();
//秒针
canvasText.save();
//设置秒针的风格
canvasText.lineWidth = 3;
canvasText.strokeStyle = 'red';
//设置表心分针画布的圆心
canvasText.translate(650, 300);
//设置旋转角度
canvasText.rotate(s * 6 * Math.PI / 180);
//绘制秒针
canvasText.beginPath();
canvasText.moveTo(0, -170);
canvasText.lineTo(0, 20);
canvasText.stroke();
canvasText.closePath();
//画出时针,分针,秒针的交叉点
canvasText.beginPath();
canvasText.arc(0, 0, 5, 0, 360, false);
//设置填充样式
canvasText.fillStyle = "gold";
canvasText.fill();
//设置笔触样式(秒针已设置)
canvasText.stroke();
canvasText.closePath();
//设置秒针前段的小圆点
canvasText.beginPath();
canvasText.arc(0, -150, 5, 0, 360, false);
//设置填充样式
canvasText.fillStyle = "gold";
canvasText.fill();
//设置笔触样式(秒针已设置)
canvasText.stroke();
canvasText.closePath();
canvasText.restore();
}
shizhong();
setInterval("shizhong()", 1000);
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791