您的位置：首页 > 移动开发 > 微信开发

HTML5之Canvas时钟小程序

2016-12-16 20:23 316 查看

这一段时间有空在看Canvas，由于以前开发过ActionScript版本的时钟，想着Canvas也一定能够实现，所以花了几个小时来调了一下，最终出来了，很是开心，所以在这里记录一下：

首先奉上效果图，虽然比较丑，没有用CSS过多的去渲染，这里完成了基本功能

：

下面是我的目录结构：

目录结构很简单，下面看看代码是怎么实现的：

myClock.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<script type="text/javascript" src="../scripts/ClockFace.js"></script>
<script type="text/javascript" src="../scripts/SimpleClock.js"></script>
</head>
<body>
<canvas id="drawing" width="200" height="200">drgdgd</canvas>
</body>
</html>

模拟时钟类：

/**
* Created by wulin on 2016/12/16.
* 模拟时钟类。程序入口
*/
window.onload = init;

function init() {
var simpleClock = new SimpleClock();
simpleClock.initClock();
}

function SimpleClock() {
this.face = null;

this.initClock = function() {
this.face = new ClockFace(200);

/*手动初始化*/
this.face.init();

/*开始*/
setInterval(function() {
this.face.init();
}.bind(this),1000);
}
}

钟面实现类：

/**
* Created by wulin on 2016/12/16.
* 钟面实现类
*/

function ClockFace(w) {

// 圆钟宽高等长
this.w = w;

/*设置半径*/
this.radius = Math.round(this.w / 2);

/*圆心坐标*/
this.centerX = this.radius;
this.centerY = this.radius;
this.currentTime;

this.drawing = document.getElementById("drawing");

this.init = function() {

if(!this.drawing.getContext) {
return;
}

this.context = this.drawing.getContext("2d");

//开始路径
this.context.beginPath();

//清楚canvas内容
this.context.clearRect(0,0,200,200);

/*绘制圆圈*/
this.drawBorder();

//变换原点
this.context.translate(this.centerX, this.centerY);

/*绘制小时文本*/
this.drawHourLabels();

//初始化时间
this.draw();

/*绘制 针*/
this.createHands();

//描边路径
this.context.stroke();

//变换原点
this.context.translate(-100, -100);
this.context.closePath();
};

this.draw = function() {

this.currentTime = new Date();
this.showTime(this.currentTime);

};

//绘制圆圈
this.drawBorder = function() {
//绘制外圆
this.context.arc(this.centerX, this.centerY, this.radius, 0, 2 * Math.PI, false);

//绘制内圆
this.context.moveTo(this.w - 6, this.centerY);
this.context.arc(this.centerX, this.centerY, this.radius - 6, 0, 2 * Math.PI, false);

};

//绘制小时文本
this.drawHourLabels = function() {
for(var i=1; i <= 12; i++) {

/*夹角角度(弧度)*/
var angleInRadians = i * 30 * (Math.PI/180);

//显示位置
var x =  0.8 * this.radius * Math.sin(angleInRadians);
var y = -(0.8 * this.radius * Math.cos(angleInRadians));

b4b0
//设置文本样式
this.context.font = "bold 14px Arial";
this.context.textAlign = "center";
this.context.textBaseline = "middle";
this.context.fillText(i.toString(), x, y);
}
};

this.createHands = function() {

//时针
var hourX =  0.5 * this.radius * Math.sin(this.hourHandRotation);
var houurY = -(0.5 * this.radius * Math.cos(this.hourHandRotation));
this.drawHand(hourX, houurY);

/**
* 分针*/
var minuteX =  0.65 * this.radius * Math.sin(this.minuteHandRotation);
var minuteY = -(0.65 * this.radius * Math.cos(this.minuteHandRotation));
this.drawHand(minuteX, minuteY);

/**
* 秒针*/
var secondX =  0.75 * this.radius * Math.sin(this.secondHandRotation);
var secondY = -(0.75 * this.radius * Math.cos(this.secondHandRotation));
this.drawHand(secondX, secondY);
};

this.drawHand = function(x, y) {

console.log(x + "," +  y);
this.context.moveTo(0, 0);
this.context.lineTo(x, y);
};

/**
* 显示时间；
* @param time
*/
this.showTime = function(time) {
/**
* 截取时间段*/
var seconds = time.getSeconds();
var minutes = time.getMinutes();
var hours = time.getHours();

/**
* 钟面初始时，时针、分针以及秒针都指向6点；
* 如果设置this.secondHandRotation = 90;就表示此时秒针顺时针转90度；*/
this.secondHandRotation = (seconds*6) * (Math.PI/180);    // 可以算出1秒6度；
this.minuteHandRotation = (minutes*6) * (Math.PI/180);    // 同上，1分6度；
this.hourHandRotation = ((hours*30) + (minutes*0.5)) * (Math.PI/180);    //知道，1小时30度，那1分就是60分之30度，即1分时时钟转动0.5度；
}
}

canvas版本的时钟是参照前一篇文章Flex版本时钟

来开发的。大致的思路和结构都差不多，在这里我没有用canvas的roate()旋转方法实现，效率较roate方法相对来说比较低下一点，改日奉上roate的使用方法。还有些文章的时间比较仓促，代码写完也没来得及过多的优化，不足之处还请见谅。

友情提示：请尊重作者劳动成果，如需转载本博客文章请注明出处！谢谢合作！

【作者：吴林 http://blog.csdn.NET/wulin】

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5 canvas 面向对象 javascript

相关文章推荐

新的分享

章节导航