使用html5画一个时钟表
来源：互联网 发布：手机算命软件 编辑：程序博客网 时间：2024/05/22 11:44
效果图
时钟是可以动态显示的，因为是截图，所以看不出秒针、分针的动态
1.主体代码
<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>时钟</title> </head> <style type="text/css"> div{ text-align:center; margin-top:250px; } #clock{ /*边框主要为了，前期方便绘画，后期可以自行清楚*/ border:1px solid #ccc; } </style> <body> <div> <canvas id="clock" height="300px" width="300px"></canvas> </div> <script type="text/javascript"> //下面所有的javascript代码都写在这里的哟 </script> </body></html>2.画背景：最外层的圆、数字、以及秒刻度的点
var dom = document.getElementById("clock");var ctx = dom.getContext("2d");var width = ctx.canvas.width;var height = ctx.canvas.height;var r = width / 2;function drawBackgroundCircle(){ //画最外层的圆 ctx.translate(r,r); ctx.lineWidth = 6; ctx.beginPath(); ctx.arc(0,0,r - 3,0,2*Math.PI,false); ctx.closePath(); ctx.stroke(); //canvas画圆的起始点是 3点钟的方向，并且顺时针，所以数组从3开始 var hourNumbers = [3,4,5,6,7,8,9,10,11,12,1,2]; ctx.font = '18px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; hourNumbers.forEach(function(number,i){ var rad = 2*Math.PI/12*i; var x = (r - 30)*Math.cos(rad); var y = (r - 30)*Math.sin(rad); ctx.fillText(number,x,y); }); //画数字和最外层中间的秒刻度点 for(var i = 0;i<60;i++){ var rad = 2*Math.PI/60*i; var x = (r - 13)*Math.cos(rad); var y = (r - 13)*Math.sin(rad); ctx.beginPath(); if(i%5===0){ ctx.fillStyle = '#a00'; ctx.arc(x,y,4,0,2*Math.PI,false); }else{ ctx.fillStyle = '#ccc'; ctx.arc(x,y,2,0,2*Math.PI,false); } ctx.closePath(); ctx.fill(); }}3.画 时针线
function drawHourBar(hours,minutes){ //计算出时针线的弧度 var rad = 2*Math.PI/12*hours + Math.PI/6*minutes/60; ctx.save(); ctx.rotate(rad); ctx.lineWidth = 3; ctx.beginPath(); ctx.lineCap="round"; ctx.moveTo(0,13); ctx.lineTo(0,-r/2); ctx.closePath(); ctx.stroke(); ctx.restore();}4.画 分针线
function drawMinuteBar(minutes){ var rad = 2*Math.PI/60*minutes; ctx.save(); ctx.rotate(rad); ctx.lineWidth = 3; ctx.beginPath(); ctx.lineCap="round"; ctx.moveTo(0,14); ctx.lineTo(0,-r + 39); ctx.closePath(); ctx.stroke(); ctx.restore();}5.画 秒针线
//基本类似上面 分针线的画法function drawSecondBar(seconds){ var rad = 2*Math.PI/60*seconds; ctx.save(); ctx.rotate(rad); ctx.strokeStyle="#a00"; ctx.lineWidth = 3; //ctx.lineCap = 'round'; ctx.beginPath(); ctx.lineCap="round"; ctx.moveTo(0,14); ctx.lineTo(0,-r + 21); ctx.closePath(); ctx.stroke(); ctx.restore();}6.画 原点
function drawDot(){ ctx.beginPath(); ctx.fillStyle = '#a00'; ctx.arc(0,0,6,0,2*Math.PI,false);//画出圆心 ctx.closePath(); ctx.fill();}7.封装上面的函数，并调用，将时钟表绘制出来
function drawAll(){ //清楚上一秒的动作 ctx.clearRect(0,0,width,height); var now = new Date(); var hours = now.getHours(); var minutes = now.getMinutes(); var seconds = now.getSeconds(); ctx.save(); drawBackgroundCircle();//此处多次重绘不必要的背景，可改进 drawHourBar(hours,minutes); drawMinuteBar(minutes); drawSecondBar(seconds); drawDot(); ctx.restore();}//调用所有函数drawAll();//设置定时器setInterval(drawAll,1000);8.整体代码
<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>时钟</title> </head> <style type="text/css"> div{ text-align:center; margin-top:250px; } #clock{ border:1px solid #ccc; } </style> <body> <div> <canvas id="clock" height="300px" width="300px"></canvas> </div> <script type="text/javascript"> var dom = document.getElementById("clock"); var ctx = dom.getContext("2d"); var width = ctx.canvas.width; var height = ctx.canvas.height; var r = width / 2; function drawBackgroundCircle(){ ctx.translate(r,r); ctx.lineWidth = 6; ctx.beginPath(); ctx.arc(0,0,r - 3,0,2*Math.PI,false); ctx.closePath(); ctx.stroke(); var hourNumbers = [3,4,5,6,7,8,9,10,11,12,1,2]; ctx.font = '18px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; hourNumbers.forEach(function(number,i){ var rad = 2*Math.PI/12*i; var x = (r - 30)*Math.cos(rad); var y = (r - 30)*Math.sin(rad); ctx.fillText(number,x,y); }); for(var i = 0;i<60;i++){ var rad = 2*Math.PI/60*i; var x = (r - 13)*Math.cos(rad); var y = (r - 13)*Math.sin(rad); ctx.beginPath(); if(i%5===0){ ctx.fillStyle = '#a00'; ctx.arc(x,y,4,0,2*Math.PI,false); }else{ ctx.fillStyle = '#ccc'; ctx.arc(x,y,2,0,2*Math.PI,false); } ctx.closePath(); ctx.fill(); } } function drawHourBar(hours,minutes){ var rad = 2*Math.PI/12*hours + Math.PI/6*minutes/60; ctx.save(); ctx.rotate(rad); ctx.lineWidth = 3; ctx.beginPath(); ctx.lineCap="round"; ctx.moveTo(0,13); ctx.lineTo(0,-r/2); ctx.closePath(); ctx.stroke(); ctx.restore(); } function drawMinuteBar(minutes){ var rad = 2*Math.PI/60*minutes; ctx.save(); ctx.rotate(rad); ctx.lineWidth = 3; ctx.beginPath(); ctx.lineCap="round"; ctx.moveTo(0,14); ctx.lineTo(0,-r + 39); ctx.closePath(); ctx.stroke(); ctx.restore(); } function drawSecondBar(seconds){ var rad = 2*Math.PI/60*seconds; ctx.save(); ctx.rotate(rad); ctx.strokeStyle="#a00"; ctx.lineWidth = 3; //ctx.lineCap = 'round'; ctx.beginPath(); ctx.lineCap="round"; ctx.moveTo(0,14); ctx.lineTo(0,-r + 21); ctx.closePath(); ctx.stroke(); ctx.restore(); } function drawDot(){ ctx.beginPath(); ctx.fillStyle = '#a00'; ctx.arc(0,0,6,0,2*Math.PI,false);//画出圆心 ctx.closePath(); ctx.fill(); } function drawAll(){ ctx.clearRect(0,0,width,height); var now = new Date(); var hours = now.getHours(); var minutes = now.getMinutes(); var seconds = now.getSeconds(); ctx.save(); drawBackgroundCircle();//此处多次重绘不必要的背景，可改进 drawHourBar(hours,minutes); drawMinuteBar(minutes); drawSecondBar(seconds); drawDot(); ctx.restore(); } drawAll(); setInterval(drawAll,1000); </script> </body></html> 0 0
- 使用html5画一个时钟表
- 玩转html5（四）----使用canvas画一个时钟
- 玩转html5（四）----使用canvas画一个时钟
- 使用HTML5 Canvas绘制一个时钟
- html5用canvas画一个时钟
- html5中使用canvas画时钟
- 玩转html5（四）----使用canvas画一个时钟（可以动的哦！）
- 使用HTML5的canvas做一个会动的时钟
- 使用HTML5的canvas做一个会动的时钟
- 使用HTML5的canvas做一个会动的时钟
- 使用canvas画一个时钟
- 用html5的canvas画一个可以动的时钟
- HTML5画时钟
- html5的canvas使用：时钟
- 使用html5 canvas 制作时钟
- 使用html5画一个棋盘
- [HTML5] 用CANVAS画时钟
- 使用html5 canvas实现漂亮时钟
- 强连通分量（强连通缩点（tarjan））+最小路径覆盖（匈牙利算法）
- matlab 自动交易系统 函数内部全局变量
- 如何反射创建泛型集合,例如Collection<T>,
- 如何在VR场景中位移与行走Unity VRTK - SteamVR Unity Toolkit针对VR开发的工具包
- 文字识别技术获突破性进展 及 ICDAR的说明
- 使用html5画一个时钟表
- 基于Maven的Springboot+Mybatis+Druid+Swagger2+mybatis-generator框架环境搭建
- 如何用JavaScript判断dom是否有class的值？
- POI2010 题解整理
- Codeforces Round #376 (Div. 2) C.SOCKS
- Could not publish server configuration for Tomcat v7.0 Server at localhost.
- Permutation Sequence
- 高性能MySql学习笔记——锁、事务、隔离级别
- Install Mongodb （Linux）
