js实现动态时钟效果
这次给大家带来canvas与JS实现动态时钟动画,canvas与JS实现动态时钟动画的注意事项有哪些,下面就是实战案例,一起来看一下。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
</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();