使用html5画一个时钟表

效果图

时钟是可以动态显示的，因为是截图，所以看不出秒针、分针的动态

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>

使用html5画一个时钟表相关推荐

HTML画正方形钟表,html5 canvas绘制时钟表时间
特效描述:html5 canvas绘制时钟表时间.用canvas精灵绘制器绘制的时钟代码结构 1. 引入JS 2. HTML代码 var Sprite=function(name,painter, ...
利用python Turtle库函数画一个实时钟表
最近学习python,接触到turtle标准库,后面又看到利用python内置库turtle库画一个实时钟表.话不多说,直接上代码叭! import turtle from datetime impo ...
html5制作线路图,HTML5画一个简单呢好看的电路图
画图API的应用,线,圆等最近特别忙,承蒙大伙关照,自己折腾着做了个HTML5画电路图何问起 canvas画简单电路图 by 何问起 [相关推荐] 1. 特别推荐:"php程序员工具箱& ...
PHP画好看的图,HTML5画一个简单呢好看的电路图
画图API的应用,线,圆等最近特别忙,承蒙大伙关照,自己折腾着做了个HTML5画电路图何问起 var canvas = document.getElementById("canHewen ...
新H5中用canvas画一个数字钟表
此文章是参考以往大牛代码,在大牛代码基础上加以更改而成. 本人暂时还是一名技术菜鸟,刚刚踏上web前端这条路才五个月,希望大牛们多多提携... 效果图如下: 话不多说,上代码: <body st ...
js 获得明天0点时间戳_js实现一个简单钟表动画(javascript+html5 canvas)
自己学生时代的代码,发现还保存着,今天拿出来分享下. 用js和html5 canvas对象实现一个简单钟表程序主要用到的就是h5的canvas对象 canvas对象本人也不是很熟,大致看了几个常用的 ...
html制作圆盘时钟,jquery+html5制作超酷的圆盘时钟表
自己封装的一个用HTML5+jQuery写的时钟表代码: 超酷数码钟表 //引用的是在线jquery地址,如果不行请自行下载切换 (function($){ $.fn.drawClock = fun ...
运用html画一个三角形,利用css或html5画出一个三角形的方法
利用css或html5画出一个三角形的方法发布时间:2020-09-14 14:49:22 来源:亿速云阅读:83 作者:小新这篇文章主要介绍利用css或html5画出一个三角形的方法,文中介绍 ...
在c++中使用easyx画一个实时走动的钟表（方法细节）
这次的任务是用c++画出实时走动的钟表,并且与当前系统的时间一致. 由于我们使用的是c++语言,我们更需要用这个例子来提高我们对面向对象程序设计的理解. 我们首先需要分析出需求,"画一个能够 ...

使用html5画一个时钟表

效果图

1.主体代码

2.画背景：最外层的圆、数字、以及秒刻度的点

3.画时针线

4.画分针线

5.画秒针线

6.画原点

7.封装上面的函数，并调用，将时钟表绘制出来

8.整体代码

使用html5画一个时钟表相关推荐

最新文章

热门文章

使用html5画一个时钟表

效果图

1.主体代码

2.画背景：最外层的圆、数字、以及秒刻度的点

3.画 时针线

4.画 分针线

5.画 秒针线

6.画 原点

7.封装上面的函数，并调用，将时钟表绘制出来

8.整体代码

使用html5画一个时钟表相关推荐

最新文章

热门文章

3.画时针线

4.画分针线

5.画秒针线

6.画原点