<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body {
margin: 0px;
background-color: bisque;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="diagonal" style="border: 1px solid red; width: 200px;height: 200px;"></canvas>
</body>
<script type="text/javascript">
canvas = document.getElementById("diagonal");
canvas.width = 200;
canvas.height = 200;
var tcx = canvas.getContext('2d');
if (tcx) {
var timersid;
var frameRate = 60;//帧率
function canvasObjcect() {
this.borderWidth = 2;//边框宽度
this.borderColor = '#000000'; //边框颜色
this.fillStyle = '#ff0000'; //填充颜色
this.update = function() {
if (!this.tcx) {
alert("你没有指定的tcx对象");
return;
}
var tcx = this.tcx;
tcx.save();
tcx.lineWidth = this.borderWidth;//边框宽度
tcx.strokeStyle = this.borderColor;//边框颜色
tcx.fillStyle = this.fillStyle; //填充样式
tcx.translate(this.x, this.y); //翻转
if (this.rotation) tcx.rotate(this.rotation * Math.PI / 180);
if (this.draw) this.draw(tcx); //绘制
if (this.fill) tcx.fill();
tcx.stroke(); //行程
tcx.restore(); //还原
}
}
}
function Circle() {}; //画圆圈
Circle.prototype = new canvasObjcect();
Circle.prototype.draw = function(tcx) {
tcx.beginPath();
tcx.arc(0, 0, this.radius, 0, 2 * Math.PI, true);
tcx.closePath();
}
function line() {}; //画线
line.prototype = new canvasObjcect();
line.prototype.fill = false; //是否填充
line.prototype.start = [0, 0]; //画线的开始
line.prototype.end = [5, 5]; //画线的结束
line.prototype.draw = function(tcx) {
tcx.beginPath(); //创建一个路径
tcx.moveTo.apply(tcx, this.start);
tcx.lineTo.apply(tcx, this.end);
tcx.closePath();
}
//画圆圈
var circle = new Circle();
circle.tcx = tcx;
circle.x = 100;
circle.y = 100;
circle.radius = 90;
circle.fill = true;
circle.borderWidth = 6;
circle.fillStyle = '#ffffff';
//画时钟
var housr = new line();
housr.tcx = tcx;
housr.x = 100;
housr.y = 100;
housr.borderWidth = 10;
housr.rotation = 0;
housr.start = [0, 20]; //绘制是时针的开始坐标
housr.end = [0, -50];
//画分针
var fenzheng = new line();
fenzheng.tcx = tcx;
fenzheng.x = 100;//分针的X轴
fenzheng.y = 100;//分针的Y轴
fenzheng.borderWidth = 10;
fenzheng.borderColor = "blue"
housr.rotation = 0;
fenzheng.start = [0, 20];//X轴的开始位置
fenzheng.end = [0, -70];//X轴的结束位置
//画秒针
var miaozhen = new line();
miaozhen.tcx = tcx;
miaozhen.y = 100;
miaozhen.x = 100;
miaozhen.borderColor = 'green';
housr.rotation = 0;
miaozhen.borderWidth = 10;
miaozhen.start = [0, 20];
miaozhen.end = [0, -80];
//画中心点
var zhongxin = new Circle();
zhongxin.tcx = tcx;
zhongxin.x = 100;
zhongxin.y = 100;
zhongxin.fill = true;
zhongxin.radius = 10;
zhongxin.borderColor = 'orange';
var s;
//时间刻度
for (var i = 0; i < 12; i++) {
var kedu = new line();
kedu.tcx = tcx;
kedu.x = 100;
kedu.y = 100;
kedu.borderColor = 'orange';
kedu.rotation = i * 30;
kedu.borderWidth = 2;
kedu.start = [0, -70];
kedu.end = [0, -80]
}
timersid = setInterval(function() {
tcx.fillStyle = "red";
tcx.fillRect(0, 0, 200, 200); //填充个矩形
circle.update(); //表盘
//时间刻度
kedu.update();
housr.rotation = (new Date()).getHours() * 36;//每秒旋转36度
housr.update(); //时钟
fenzheng.rotation = (new Date()).getMinutes() * 6;//每秒旋转六度
fenzheng.update(); //分针
miaozhen.rotation = (new Date()).getSeconds() * 6;//每秒旋转六度
miaozhen.update(); //秒针
zhongxin.update(); //中心
})
</script>
</html>
浙公网安备 33010602011771号