JS+canvas绘制的动态机械表动画效果
程序员文章站
2022-04-28 23:52:42
本文实例讲述了js+canvas绘制的动态机械表动画效果。分享给大家供大家参考，具体如下：
先来看看运行效果：
完整实例代码：
本文实例讲述了js+canvas绘制的动态机械表动画效果。分享给大家供大家参考，具体如下：
先来看看运行效果：
完整实例代码：
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>www.jb51.net canvas时钟</title>
<style>
canvas {
border: 1px solid red;
}
</style>
</head>
<body>
<canvas width="800" height="600"></canvas>
</body>
<script>
function clock(opt) {
for (var key in opt) {
this[key] = opt[key];
}
this.init();
}
clock.prototype = {
init: function () {
var self = this;
var ctx = this.ctx;
this.timer = setinterval(function(){
ctx.clearrect(0,0,ctx.canvas.width,ctx.canvas.height);
self.drawdial();
self.drawdegreescale();
self.drawnumber();
self.drawpointers();
},1000);
},
drawdial: function () {
var ctx = this.ctx;
ctx.save();
ctx.beginpath();
ctx.linewidth = this.clockdialw;
ctx.strokestyle = this.clockdialcolor;
ctx.arc(this.clockx, this.clocky, this.clockradius, 0, 2 * math.pi);
ctx.stroke();
ctx.restore();
},
drawdegreescale: function () {
var ctx = this.ctx;
var clockradius = this.clockradius;
var clockx = this.clockx;
var clocky = this.clocky;
var bigdegreescalel = this.bigdegreescalel;
var smalldegreescale = this.smalldegreescale;
var startx, starty, endx, endy, radian;
ctx.save();
for (var i = 0; i < 12; i++) {
radian = i * math.pi / 6;
endx = clockx + clockradius * math.cos(radian);
endy = clocky + clockradius * math.sin(radian);
if (radian % (math.pi / 2) == 0) {
startx = clockx + (clockradius - bigdegreescalel) * math.cos(radian);
starty = clocky + (clockradius - bigdegreescalel) * math.sin(radian);
ctx.linewidth = this.bigdcwidth;
} else {
startx = clockx + (clockradius - smalldegreescale) * math.cos(radian);
starty = clocky + (clockradius - smalldegreescale) * math.sin(radian);
ctx.linewidth = this.smalldcwidth;
}
ctx.beginpath();
ctx.moveto(startx, starty);
ctx.lineto(endx, endy);
ctx.stroke();
ctx.restore();
}
},
drawnumber: function () {
var ctx = this.ctx;
var textx, texty, textradian;
var clockx = this.clockx;
var clocky = this.clocky;
var clockradius = this.clockradius;
ctx.font = '20px 微软雅黑';
ctx.fillstyle = 'red';
ctx.textalign = 'center';
ctx.textbaseline = 'middle';
ctx.save();
for (var i = 0; i < 12; i++) {
textradian = i * math.pi / 6 - math.pi/3;
textx = clockx + (clockradius - 40) * math.cos(textradian);
texty = clocky + (clockradius - 40) * math.sin(textradian);
ctx.beginpath();
ctx.filltext(i + 1, textx, texty);
}
ctx.restore();
},
drawpointers: function () {
var date = new date();
var h = date.gethours();
var m = date.getminutes();
var s = date.getseconds();
h = h % 12;
var hradian = 2 * math.pi / 12 * h - math.pi / 2;
this.drawpoint(hradian,30,'red',8);
var mradian = 2 * math.pi / 60 * m - math.pi / 2;
this.drawpoint(mradian,50,'blue',6);
var sradian = 2 * math.pi / 60 * s - math.pi / 2;
this.drawpoint(sradian,70,'green',2);
},
drawpoint: function (radian, length,color,linewidth) {
var x = this.clockx + math.cos(radian) * length;
var y = this.clocky + math.sin(radian) * length;
var ctx = this.ctx;
ctx.save();
ctx.beginpath();
ctx.strokestyle = color;
ctx.linewidth = linewidth;
ctx.moveto(this.clockx,this.clocky);
ctx.lineto(x,y);
ctx.stroke();
ctx.restore();
}
};
</script>
<script>
var canvas = document.queryselector('canvas');
var ctx = canvas.getcontext('2d');
var clock = new clock({
ctx: this.ctx,
clockradius: 150,
clockx: 300,
clocky: 300,
clockdialw: 6,
clockdialcolor: 'blue',
bigdegreescalel: 20,
bigdcwidth: 6,
smalldegreescale: 10,
smalldcwidth: 4
});
</script>
</html>
更多关于javascript相关内容感兴趣的读者可查看本站专题：《javascript+html5特效与技巧汇总》、《javascript动画特效与技巧汇总》、《javascript图形绘制技巧总结》、《javascript切换特效与技巧总结》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》及《javascript数学运算用法总结》
希望本文所述对大家javascript程序设计有所帮助。