JS+canvas绘制的动态机械表动画效果
更新时间：2017年09月12日 11:42:53 作者：ITzhongzi
这篇文章主要介绍了JS+canvas绘制的动态机械表动画效果,涉及javascript结合HTML5 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程序设计有所帮助。
相关文章
本文主要介绍了JavaScript实现绘制两个坐标之间的连线功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-11-11
严格模式就是使JS编码更加规范化的模式,消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为。下面通过代码相结合的形式给大家介绍js中的严格模式，感兴趣的朋友一起看看吧2018-06-06
这篇文章主要为大家详细介绍了微信小程序实现常见弹出层效果 ，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
这篇文章主要介绍了JS模拟浏览器实现全局搜索功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-09-09
这篇文章主要给大家介绍了关于移动端H5页面返回并刷新页面（BFcache）的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-11-11
这篇文章主要为大家详细介绍了H5图片上传插件，基于zepto，支持多文件上传，进度和图片预览，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
这篇文章主要为大家介绍了iframe实现高度自适应小程序web-view方案详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
zTree插件之多选下拉菜单实例代码。需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
这篇文章主要介绍了新版小程序登录授权的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要介绍了验证码功能的三种实现方式,分为数字短信验证码，图形验证码，滑动验证码，本文通过示例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-11-11
最新评论