小程序的制造流程_JS+canvas绘制的动态机械表动画

JS+canvas绘制的动态机械表动画效果       这篇文章主要介绍了JS+canvas绘制的动态机械表动画效果,涉及javascript结合HTML5 canvas简单数值计算与动态绘图相关操作技巧,需要的朋友可以参考下

本文实例讲述了JS+canvas绘制的动态机械表动画效果。分享给大家供大家参考,具体如下:

先来看看运行效果:

完整实例代码:

 !DOCTYPE html 
 html 
 head lang="en" 
 meta charset="UTF-8" 
 title  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 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 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程序设计有所帮助。




扫描二维码分享到微信