JS+canvas繪制的動態(tài)機械表動畫效果
更新時間：2017年09月12日 11:42:53 作者：ITzhongzi
這篇文章主要介紹了JS+canvas繪制的動態(tài)機械表動畫效果,涉及javascript結合HTML5 canvas簡單數(shù)值計算與動態(tài)繪圖相關操作技巧,需要的朋友可以參考下
本文實例講述了JS+canvas繪制的動態(tài)機械表動畫效果。分享給大家供大家參考，具體如下：
先來看看運行效果：
完整實例代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>www.dhdzp.com 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相關內(nèi)容感興趣的讀者可查看本站專題：《JavaScript+HTML5特效與技巧匯總》、《JavaScript動畫特效與技巧匯總》、《JavaScript圖形繪制技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript錯誤與調(diào)試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》及《JavaScript數(shù)學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
JAVASCRIPT模式窗口中下載文件無法接收iframe的流
模式窗口中下載文件，有時在下載時發(fā)現(xiàn)服務器無法接收iframe的流，因為在模式窗口中沒有觸發(fā)iframe的src重新定向事件2013-10-10
在本篇文章里小編給大家分享的是關于javascript單張多張圖無縫滾動實例代碼和實例，需要的朋友們可以參考下。2020-05-05
這篇文章主要為大家詳細介紹一下微信小程序?qū)崿F(xiàn)頁面導航的幾種方法以及幫助大家掌握微信小程序如何進行傳遞參數(shù)，感興趣的朋友可以了解一下2022-08-08
今天小編就為大家分享一篇使用JS實現(xiàn)導航切換時高亮顯示的示例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了js常見遍歷操作,結合實例形式分析了javascript for循環(huán)、for in、for each、each及map遍歷簡單操作技巧,需要的朋友可以參考下2019-06-06
?javascript數(shù)組中的slice方法和join??方法
這篇文章主要介紹了?javascript數(shù)組中的slice方法和join??方法，文章內(nèi)容介紹詳細，具有一的參考價值，需要的小伙伴可以參考一下，希望對你的學習有所幫助2022-03-03
這篇文章主要為大家詳細介紹了laypage+SpringMVC實現(xiàn)后端分頁，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
List the Codec Files on a Computer
List the Codec Files on a Computer...2007-06-06
javascript中日期函數(shù)new Date()的瀏覽器兼容性問題
這篇文章主要介紹了javascript中日期函數(shù)new Date()的瀏覽器兼容性問題,需要的朋友可以參考下2015-09-09
JavaScript 實現(xiàn)打印,打印預覽,打印設置
這篇文章主要介紹了JavaScript 實現(xiàn)打印,打印預覽,打印設置的方法及示例分享,需要的朋友可以參考下2014-12-12