关闭

简单 --> js+canvas 时钟

标签: javascriptcanvas
45人阅读 评论(0) 收藏 举报
分类:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>clock</title>
<style type="text/css">
#canvas{width: 500px;height: 600px;box-shadow: 3px 3px 15px 3px rgba(100,100,100,0.6);position: absolute;left: 0;right: 0;margin: 20px auto;}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="600"></canvas>
<p></p>
<script>
var p = document.getElementsByName('p')[0];
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
function clock(){
canvas.width = canvas.width;
//画布
ctx.beginPath();
ctx.translate(250,250);
ctx.rotate(-Math.PI/2);
ctx.strokeStyle = '#333';
ctx.lineWidth = '10';
ctx.arc(0,0,200,0,Math.PI*2,false);
ctx.stroke();
ctx.closePath();


ctx.save();
ctx.strokeStyle = '#333';
ctx.lineWidth = '6';
ctx.lineCap="round";
for(var i=1;i<13;i++){
ctx.rotate(Math.PI/6);
ctx.beginPath();
ctx.moveTo(200,0);
ctx.lineTo(170,0);
ctx.stroke();
// ctx.font = "1em 微软雅黑";
// ctx.fillText(i,140,0);
ctx.closePath();
}
ctx.restore();

ctx.save();
ctx.strokeStyle = '#333';
ctx.lineWidth = '4';
ctx.lineCap="round";
ctx.lineCap="round";
for(var i=1;i<61;i++){
ctx.rotate(Math.PI/30);
ctx.beginPath();
if(i%5==0){continue;}
ctx.moveTo(200,0);
ctx.lineTo(180,0);
ctx.stroke();
}
ctx.restore();



var time = new Date();
var hours = time.getHours();
var minutes = time.getMinutes();
var seconds = time.getSeconds();



//时针
ctx.save();
ctx.beginPath();
ctx.rotate(hours*Math.PI/6 + minutes*Math.PI/6/60 + seconds*Math.PI/6/60/60);  //时针转动
ctx.lineWidth = '4';
ctx.strokeStyle = 'black';
ctx.moveTo(0,0);
ctx.lineTo(80,0);
ctx.stroke();
ctx.lineWidth = '1';
ctx.strokeStyle = 'black';
ctx.moveTo(80,-10);
ctx.lineTo(90,0);
ctx.lineTo(80,10);
ctx.lineTo(80,-10);
ctx.fillStyle = 'black';
ctx.fill();
ctx.stroke();
ctx.closePath();
ctx.restore();

//分针
ctx.save();
ctx.beginPath();
ctx.rotate(minutes*Math.PI/30 + seconds*Math.PI/30/60);   //分针转动
ctx.lineWidth = '3';
ctx.strokeStyle = 'blue';
ctx.moveTo(0,0);
ctx.lineTo(120,0);
ctx.stroke();
ctx.lineWidth = '1';
ctx.strokeStyle = 'blue';
ctx.moveTo(120,-8);
ctx.lineTo(130,0);
ctx.lineTo(120,8);
ctx.lineTo(120,-8);
ctx.fillStyle = 'blue';
ctx.fill();
ctx.stroke();
ctx.closePath();
ctx.restore();

//秒针
ctx.save();
ctx.beginPath();
ctx.lineWidth = '2';
ctx.strokeStyle = 'red';
ctx.rotate(seconds*Math.PI/30); //秒针转动
ctx.moveTo(-15,0);
ctx.lineTo(140,0);
ctx.stroke();
ctx.lineWidth = '1';
ctx.strokeStyle = 'red';
ctx.moveTo(140,-6);
ctx.lineTo(150,0);
ctx.lineTo(140,6);
ctx.lineTo(140,-6);
ctx.fillStyle = 'red';
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.lineWidth = 3;
ctx.arc(0,0,5,0,Math.PI*2,false);
ctx.fillStyle = '#999';
ctx.fill();
ctx.stroke();
ctx.closePath();
ctx.restore();

var strday = hours +"-"+ minutes +"-"+ seconds;
ctx.save();
ctx.font = "3em 微软雅黑";
ctx.rotate(Math.PI/2);
ctx.fillText(3,120,20);
ctx.fillText(6,-15,150);
ctx.fillText(9,-150,20);
ctx.fillText(12,-25,-120);
ctx.fillText(strday , -105 , 300);
ctx.restore();

window.requestAnimationFrame(clock);
}
window.requestAnimationFrame(clock);
//clock();
</script>
</body>
</html>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:121次
    • 积分:22
    • 等级:
    • 排名:千里之外
    • 原创:2篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档