简单的canvas时钟

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>clock</title>
  6 </head>
  7 <body>
  8     <canvas id="clock" width="500" height="500" style="display:block; margin:50px auto">
  9         您的浏览器不支持canvas标签!
 10     </canvas>
 11     <script>
 12         var clock = document.getElementById(‘clock‘);
 13         var ctx = clock.getContext(‘2d‘);
 14         function drawClock(){
 15             var today = new Date();
 16             var year = today.getFullYear();
 17             var month = today.getMonth() + 1;
 18             var date = today.getDate();
 19             var day = today.getDay();
 20             var hour = today.getHours();
 21             var minute = today.getMinutes();
 22             var second = today.getSeconds();
 23             hour = hour > 12 ? hour - 12 : hour;
 24
 25             ctx.clearRect(0, 0, 500, 500);
 26
 27             ctx.fillStyle = ‘#fff‘;
 28             ctx.beginPath();
 29             ctx.arc(250, 250, 205, 0, 2*Math.PI);
 30             ctx.closePath();
 31             ctx.fill();
 32
 33             ctx.strokeStyle = ‘#ddd‘;
 34             ctx.lineWidth = 10;
 35             ctx.beginPath();
 36             ctx.arc(250, 250, 185, 0, 2*Math.PI);
 37             ctx.closePath();
 38             ctx.stroke();
 39
 40             ctx.strokeStyle = ‘#96DFF7‘;
 41             ctx.lineWidth = 10;
 42             ctx.beginPath();
 43             ctx.arc(250, 250, 200, 0, 2*Math.PI);
 44             ctx.closePath();
 45             ctx.stroke();
 46
 47             ctx.strokeStyle = ‘#96DFF7‘;
 48             ctx.lineWidth = 3;
 49             ctx.beginPath();
 50             ctx.arc(250, 250, 192, 0, 2*Math.PI);
 51             ctx.closePath();
 52             ctx.stroke();
 53
 54             ctx.strokeStyle = ‘#09303C‘;
 55             ctx.lineWidth = 5;
 56             ctx.beginPath();
 57             ctx.arc(250, 250, 205, 0, 2*Math.PI);
 58             ctx.closePath();
 59             ctx.stroke();
 60
 61
 62             // 时刻度
 63             for(var i = 0; i < 12; i++) {
 64                 ctx.save();
 65                 ctx.lineWidth = 4;
 66                 ctx.strokeStyle = ‘#000‘;
 67                 ctx.translate(250, 250);
 68                 ctx.rotate(30 * i / 180 * Math.PI);
 69                 ctx.beginPath();
 70                 ctx.moveTo(0, 180);
 71                 ctx.lineTo(0, 160);
 72                 ctx.closePath();
 73                 ctx.stroke();
 74                 ctx.restore();
 75             }
 76             // 分刻度
 77             for(var i = 0; i < 60; i++) {
 78                 if(i % 5 != 0){
 79                     ctx.save();
 80                     ctx.lineWidth = 2;
 81                     ctx.strokeStyle = ‘#000‘;
 82                     ctx.translate(250, 250);
 83                     ctx.rotate(6 * i / 180 * Math.PI);
 84                     ctx.beginPath();
 85                     ctx.moveTo(0, 175);
 86                     ctx.lineTo(0, 170);
 87                     ctx.closePath();
 88                     ctx.stroke();
 89                     ctx.restore();
 90                 }
 91             }
 92
 93             // 秒针
 94             ctx.save();
 95             ctx.lineWidth = 2;
 96             ctx.strokeStyle = "#f00";
 97             ctx.beginPath();
 98             ctx.translate(250, 250);
 99             ctx.rotate((second * 6 + 180) / 180 * Math.PI);
100             ctx.moveTo(0, 0);
101             ctx.lineTo(0, 150);
102             ctx.closePath();
103             ctx.stroke();
104             ctx.restore();
105
106             // 分针
107             ctx.save();
108             ctx.lineWidth = 4;
109             ctx.strokeStyle = "#0ff";
110             ctx.beginPath();
111             ctx.translate(250, 250);
112             ctx.rotate((minute * 6 + second * 0.1 + 180) / 180 * Math.PI);
113             ctx.moveTo(0, 0);
114             ctx.lineTo(0, 130);
115             ctx.closePath();
116             ctx.stroke();
117             ctx.restore();
118
119             // 时针
120             ctx.save();
121             ctx.lineWidth = 6;
122             ctx.strokeStyle = "#000";
123             ctx.beginPath();
124             ctx.translate(250, 250);
125             ctx.rotate((hour * 30 + minute * 0.5 + 180) / 180 * Math.PI);
126             ctx.moveTo(0, 0);
127             ctx.lineTo(0, 90);
128             ctx.closePath();
129             ctx.stroke();
130             ctx.restore();
131
132             ctx.fillStyle = "#f00";
133             ctx.beginPath();
134             ctx.arc(250, 250, 10, 0, 2 * Math.PI);
135             ctx.closePath();
136             ctx.fill();
137             ctx.fillStyle = "#000";
138             ctx.beginPath();
139             ctx.arc(250, 250, 8, 0, 2 * Math.PI);
140             ctx.closePath();
141             ctx.fill();
142             ctx.fillStyle = "#fff";
143             ctx.beginPath();
144             ctx.arc(250, 250, 6, 0, 2 * Math.PI);
145             ctx.closePath();
146             ctx.fill();
147
148         }
149         drawClock();
150         setInterval(drawClock,10);
151     </script>
152 </body>
153 </html>

时间: 2024-10-04 20:11:27

简单的canvas时钟的相关文章

js简单 图片版时钟,带翻转效果

js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>时钟</title> <style type="text/css"> ul,li{ list-style: none; margin: 0; padding: 0; } ul{ position: absolute; left: 2

原生js之canvas时钟组件

canvas一直是前端开发中不可或缺的一种用来绘制图形的标签元素,比如压缩上传的图片.比如刮刮卡.比如制作海报.图表插件等,很多人在面试的过程中也会被问到有没有接触过canvas图形绘制. 定义 canvas元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. canvas标签只是图形容器,您必须使用脚本来绘制图形. 浏览器支持 Internet Explorer 9.Firefox.Opera.Chrome 和 Safari 支持 那么本篇文章就通过一个时钟组件来熟悉使用一下关

JS — 实现简单的数字时钟

js实现简单的数字时钟 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JS — 实现简单的数字时钟效果</title> 6 <link rel="stylesheet" type="text/css" href=""> 7 </head>

canvas简单实现动态时钟

使用到的知识: 1.     获取系统时间 2.     画图形,空心图形,实心图形,以及一些属性 3.     for循环 准备工作:添加一块画布1000*1000(随意),引用canvas.js <!doctype html> <html>  <head>   <meta charset="UTF-8">   <meta name="Generator" content="EditPlus?&quo

HTML5之Canvas时钟(网页效果--每日一更)

今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:http://webfront.verynet.cc/pc/canvas-clock.html 众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由JavaScript控制的即时模式位图区域.即时模式是指在画布上呈现像素的方式, HTML5 Canvas通过JavaScript调用CanvasAPI,在每一帧完全重绘屏幕上的位图.详细将在下面代码进行说明. HTML结构代码

Canvas - 时钟绘制

导语:距离上一次写canvas,已经过去两年半,如今业务需要,再次拾起,随手记录. [思考] 时钟的绘制主要在于圆的绘制:1. 使用context.arc()方法直接绘制圆或圆弧: 2. 使用圆的方程(x = r * cosA + X, y = r * sinA + Y)进行描点绘制.指针运行速率较慢,故使用setInterval进行刷新重绘.[优化]可以使用两个canvas,一个用来绘制表盘,另一个绘制指针,如此,只需刷新重绘指针canvas,表盘canvas保持不变. <!DOCTYPE h

canvas时钟绘制

index.html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>时钟</title> <style> div{ text-align: center; margin-top: 250px; } </style> </head> <body> <d

简单入门canvas - 通过刮奖效果来学习

一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下,通过一个刮奖效果来学习. 二.canvas基础 本文的目标是做一个刮奖效果,但是如果都不知道canvas是怎么回事,那么肯定也无法进行下去,所以先讲讲canvas基础吧. 首先,该怎么理解canvas,思来想去,最好的理解办法应该就是把canvas理解为一个空白的画纸,一张你可以在上面画画的纸. 然

WinForm学习 --简单的模拟时钟程序

今天学习GDI+,试着想写一个模拟时钟的小程序,原以为很简单实现:但其实还有些复杂,特别是利用三角函数的那部分,让我四处找资料恶补了一下高中数学才算弄清楚,现在就回顾一下这个程序吧. 程序的目的是要模拟出时钟的效果,那首先就是要画出这个时钟的样子.不考虑美观,一个时钟最简单的组成是一个圆形的表盘,三根直线代表的时针.分针和秒针. <img缺失> 看起来很简单吧,但要怎么样画呢?让我们一步一步来吧: 1.画表盘 Graphics g = this.CreateGraphics(); //创建一个