您的位置：首页 > 其它

用 Canvas 绘制实时时钟

2017-10-25 15:48 323 查看

之前就看过关于 Canvas 的基础，但是还没上过战场实时过呢，今天就来练练手，画一个实时时钟吧~其实这个特别简单，稍微有点耐心都能完成~话不多少，还是喜欢直接上代码：

test.html 代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>canvas——时钟</title>
<style type="text/css">
#clock{
border: 1px solid #ccc;
box-shadow: 0 0 5px #ccc;
}
</style>
</head>
<body>
<div id="clockBox">
<canvas id="clock" width="200" height="200"></canvas>
</div>
<script type="text/javascript" src="../js/test.js"></script>
</body>
</html>
test.js 代码如下：

var dom = document.getElementById("clock"); //获取 Canvas 标签
var ctx = dom.getContext("2d");
var width = ctx.canvas.width; // 获取 Canvas 标签的宽度
var height = ctx.canvas.height; // 获取 Canvas 标签的高度
var r = width/2;
var ratio = width/200; //放大缩小比例，为了让不管 Canvas 标签是放大还是缩小都不会发生样式的改变

//绘制时钟边框
function clockFrame(){
ctx.save();
ctx.translate(r,r); //重新映射画布上的（0,0）原点坐标位置
ctx.beginPath();
ctx.lineWidth = 20*ratio; //设置线条宽度
ctx.arc(0, 0, r-ctx.lineWidth/2, 0, 2*Math.PI, false); // 时钟形状（圆形），arc(x,y,r,sAngle,eAngle,counterclockwise)
//x、y是圆心坐标；r是圆半径；sAngle起始角度；eAngle结束角度；counterclockwise为true时为逆时针，为false时时顺时针
ctx.strokeStyle="#FEE440";
ctx.stroke();
ctx.fillStyle="#FEF1C4";
ctx.fill();

for(var i=0; i<60; i++){
var rad = 2*Math.PI/60*i;
var x1,x2,y1,y2;
x2 = (r-12*ratio)*Math.cos(rad);
y2 = (r-12*ratio)*Math.sin(rad);

if( i % 5 === 0 ){
ctx.beginPath();
if(i==45){ //12点出显示最宽
ctx.lineWidth = 5;
}else{
ctx.lineWidth = 3;
}
x1 = (r-25*ratio)*Math.cos(rad);
y1 = (r-25*ratio)*Math.sin(rad);
ctx.strokeStyle="#FEE440";
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
}else{
ctx.beginPath();
ctx.lineWidth = 1;
x1 = (r-18*ratio)*Math.cos(rad);
y1 = (r-18*ratio)*Math.sin(rad);
ctx.strokeStyle="#B6B4B2";
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
}
}
}

//绘制时针
function clockHour(hour,minute){
ctx.save();
var rad = 2*Math.PI/12*hour;
var mrad = 2*Math.PI/12/60*minute;
ctx.beginPath();
ctx.rotate(rad + mrad);
ctx.lineWidth = 6*ratio;
ctx.lineCap = 'round';
ctx.moveTo(0, 10*ratio);
ctx.lineTo(0, -r/2);
ctx.strokeStyle="#726A5E";
ctx.stroke();
ctx.restore();
}

//绘制分针
function clockMinute(minute){
ctx.save();
var rad = 2*Math.PI/60*minute;
ctx.beginPath();
ctx.rotate(rad);
ctx.lineWidth = 3*ratio;
ctx.lineCap = 'round';
ctx.moveTo(0, 10*ratio);
ctx.lineTo(0, -r+35*ratio);
ctx.strokeStyle="#726A5E";
ctx.stroke();
ctx.restore();
}

//绘制秒针
function clockSecond(second){
ctx.save();
var rad = 2*Math.PI/60*second;
ctx.beginPath();
ctx.rotate(rad);
ctx.moveTo(-2*ratio, 20*ratio);
ctx.lineTo(2*ratio, 20*ratio);
ctx.lineTo(1*ratio, -r+18*ratio);
ctx.lineTo(-1*ratio, -r+18*ratio);
ctx.fillStyle = "#E25912";
ctx.fill();
ctx.restore();
}

//绘制固定指针的小圆圈
function fixedPoint(){
ctx.beginPath();
ctx.lineWidth = 4*ratio;
ctx.arc(0, 0, 6*ratio, 0, 2*Math.PI, false);
ctx.strokeStyle = "#726A5E";
ctx.stroke();
ctx.fillStyle = "#ACE0ED";
ctx.fill();
ctx.fill();
}

function draw(){
ctx.clearRect(0,0,width,height); //每次都清除一次画布，重新绘制
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();

clockFrame();
clockHour(hour,minute);
clockMinute(minute);
clockSecond(second);
fixedPoint();

ctx.restore();

}

draw();

setInterval(draw,1000);

最终效果图如下（每秒钟都在动）：

就这么完成啦~

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

标签：

相关文章推荐

新的分享

章节导航