JS+canvas绘制的动态机械表动画效果
网络编程 2021-07-04 17:32www.168986.cn编程入门
这篇文章主要介绍了JS+canvas绘制的动态机械表动画效果,涉及javascript结合HTML5 canvas简单数值计算与动态绘图相关操作技巧,需要的朋友可以参考下
本文实例讲述了JS+canvas绘制的动态机械表动画效果。分享给大家供大家参考，具体如下
先来看看运行效果
完整实例代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>.jb51. 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程序设计有所帮助。
编程语言
- 宿迁百度关键词排名指南：实现精准营销的关键
- 四川SEO优化怎么做网络推广
- 立昂技术备案老域名收购：如何为您的业务赋能
- 安徽百度关键词seo贵不贵，一般需要多少钱
- 吉林百度快照排名怎么做电话营销
- 多伦新手做SEO怎么做
- 甘肃优化关键词排名推广怎么做论坛营销
- 沙雅SEO网站推广：提升您的在线可见性
- 四川SEO优化如何提升销售额和销售量
- 聂荣网站排名优化：提升网站可见性的全方位指
- 涞水SEO：提升地方企业在线可见性的策略
- 辽宁百度seo排名怎样做网站排名
- 临湘哪有关键词排名优化：提升网站可见度的关
- 黑龙江百度网站优化有没有优惠
- 凉城优化关键词排名推广：提升您的网络可见性
- 萝北整站优化：提升您网站流量和排名的全面指