关闭

简单 --> js+canvas 时钟

标签: javascriptcanvas
59人阅读 评论(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网站的观点或立场

html5画布操作的简单学习-简单时钟

html5画布操作的简单学习-简单时针 一.什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域,您可以控制其每一像素...
  • as375256234
  • as375256234
  • 2014-12-13 11:55
  • 2148

第一个Canvas实例-钟表

基础的画线画圆等操作。 你的浏览器不支持canvas标! //获取上下文文档对象 var c...
  • ACdreamers
  • ACdreamers
  • 2013-12-28 16:46
  • 2505

用canvas完成超炫酷的数字时钟

这次要完成的是一个很炫酷很炫酷的时钟, 如图   每一次时钟更新都伴随有很多彩色小球落下,很不是很赞啊!O(∩_∩)O~ 这个东西呢,主要用到了两个方面的东西:canvas和js中的Date对...
  • u014209090
  • u014209090
  • 2015-02-06 17:30
  • 2077

[canvas,js]日历时钟

  • 2016-12-25 15:39
  • 5KB
  • 下载

Three.JS学习 7:使用Canvas画一个时钟

本章节不是Three.JS内容,而是Canvas内容在canvas上画时钟准备工作取一张钟表的背景图过来,放在images/ 文件夹下 准备canvas Canvas Clock ...
  • xundh
  • xundh
  • 2017-01-14 11:33
  • 904

android 用canvas 绘制简单圆形时钟

写笔记写写不过人家 http://blog.csdn.net/u010575173/article/details/52701936 1,Android - Paint基础 在自定义控件时...
  • androidV
  • androidV
  • 2016-11-07 23:55
  • 744

利用canvas绘制一个简单时钟

首先在主页面中构建基本框架,其实只有一个时钟也没有什么框架啦 canvas clock div{ text-align: center; margin-top: 2...
  • tian_123456789
  • tian_123456789
  • 2016-11-18 20:22
  • 915

CSS+JS实现简单的时钟

之前在网站上看到过别人用几行CSS代码就实现了一个简单的时钟,感觉挺有趣的,就自己仿照着也实现了一下。感觉里面用到的知识点都挺适合新手学习的,所以贴出来和大家一起学习学习。下面是实现后的效果图。实现的...
  • willsion_liu
  • willsion_liu
  • 2017-07-08 22:35
  • 97

CSS3+js实现简单的旋转圆环时钟效果实例

时钟的demo *{margin:0;padding:0;} .loading{margin:100px auto;width:25em;height:8em;position: relati...
  • qq_38384536
  • qq_38384536
  • 2017-06-18 14:13
  • 167

js数字时钟 一个简单的实例

  • 2009-04-09 21:25
  • 3KB
  • 下载
    个人资料
    • 访问:158次
    • 积分:22
    • 等级:
    • 排名:千里之外
    • 原创:2篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档