源码如下:

<!doctype html>

<html>

<head></head>

<body>

<canvas id="clock" width="500" height="500">

您的浏览器不支持canvas标签

，无法看到时钟

</canvas>

<script>

var clock=document.getElementById('clock');

var cxt=clock.getContext('2d');

function drawClock(){

//清除画布

cxt.clearRect(0,0,500,500);

var now =new Date();

var sec=now.getSeconds();

var min=now.getMinutes();

var hour=now.getHours();

//小时必须获取浮点类型(小时+分数转化成的小时)

hour=hour+min/60;

//问题 19:23:30

//将24小时进制转换为12小时

hour=hour>12?hour-12:hour;

//表盘(蓝色)

cxt.lineWidth=10;

cxt.strokeStyle="blue";

cxt.beginPath();

cxt.arc(250,250,200,0,360,false);

cxt.closePath();

cxt.stroke();

//刻度

//时刻度

for(var i=0;i<12;i++){

cxt.save();

//设置时针的粗细

cxt.lineWidth=7;

//设置时针的颜色

cxt.strokeStyle="#000";

//先设置0,0点

cxt.translate(250,250);

//再设置旋转角度

cxt.rotate(i*30*Math.PI/180);//角度*Math.PI/180=弧度

cxt.beginPath();

cxt.moveTo(0,-170);

cxt.lineTo(0,-190);

cxt.closePath();

cxt.stroke();

cxt.restore();

}

//分刻度

for(var i=0;i<60;i++){

cxt.save();

//设置分刻度的粗细

cxt.lineWidth=5;

//设置颜色(使用时刻度的颜色)

cxt.strokeStyle="#000";

//设置或者重置画布的0，0点

cxt.translate(250,250);

//设置旋转角度

cxt.rotate

(i*6*Math.PI/180);

//画分针刻度

cxt.beginPath();

cxt.moveTo(0,-180);

cxt.lineTo(0,-190);

cxt.closePath();

cxt.stroke();

cxt.restore();

}

//时针

cxt.save();

//设置时针风格

cxt.lineWidth=7;

//设置时针的颜色

cxt.strokeStyle="#000";

//设置异次元空间的0，0点

cxt.translate(250,250);

//设置旋转角度

cxt.rotate

(hour*30*Math.PI/180);

cxt.beginPath();

cxt.moveTo(0,-140);

cxt.lineTo(0,10);

cxt.closePath();

cxt.stroke();

cxt.restore();

//分针

cxt.save();

//设置分针的风格

cxt.lineWidth=5;

cxt.strokeStyle="#000";

//设置异次元空间分针画布的圆心

cxt.translate(250,250);

//设置旋转角度

cxt.rotate(min*6*Math.PI/180);

cxt.beginPath();

cxt.moveTo(0,-160);

cxt.lineTo(0,15);

cxt.closePath();

cxt.stroke();

cxt.restore();

//秒针

cxt.save();

//设置秒针的风格

//颜色红色

cxt.strokeStyle="red";

//粗细 3像素

cxt.lineWidth=3;

//重置0，0点

cxt.translate(250,250);

//设置旋转角度

cxt.rotate

(sec*6*Math.PI/180);

//画图

cxt.beginPath();

cxt.moveTo(0,-170);

cxt.lineTo(0,20);

cxt.closePath();

cxt.stroke();

//画出时针、分针、秒针的交叉点、

cxt.beginPath();

cxt.arc(0,0,5,0,360,false);

cxt.closePath();

//设置填充样式

cxt.fillStyle="gray";

cxt.fill();

//设置笔触样式(秒针已设置)

cxt.stroke();

//设置秒针前段的小圆点

cxt.beginPath();

cxt.arc(0,-150,5,0,360,false);

cxt.closePath();

//设置填充样式

cxt.fillStyle="gray";

cxt.fill();

//设置笔触样式(秒针已设置)

cxt.stroke();

cxt.restore();

}

//使用setInterval(代码,毫秒时间) 让时钟动起来

drawClock();

setInterval

(drawClock,1000);

</script>

</body>

</html>

H5实现的时钟的更多相关文章

  1. h5实现实时时钟

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta nam ...

  2. h5 html5 模拟时钟 页面

    <!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content=& ...

  3. H5 canvas圆形的时钟

    今天用H5中的canvas标签做一个时钟,H5中有很多好用的新增标签,真的很不错. 1.canvas标签介绍 <canvas> 标签定义图形,比如图表和其他图像,你必须使用脚本来绘制图形. ...

  4. 通过H5的新标签canvas做出一个时钟的全过程，希望对初学者有帮助

    最近学习了H5中的一个新标签canvas并且用它做出了一个时钟,最下面是成品图像,还不错吧,这只是我学习中的一个小demo,做得有点粗糙,但终究是做出来了,以后再写自己的网页主页再做一个好看点放上去. ...

  5. 用H5的canvas做时钟

    <!doctype html><html> <head> <meta charset="UTF-8"> <title>D ...

  6. JavaScript之“创意时钟”项目

    “时钟展示项目”说明文档(文档尾部附有相应代码) 一.最终效果展示: 二.项目亮点 1.代码结构清晰明了 2.可以实时动态显示当前时间与当前日期 3.界面简洁.美观.大方 4.提高浏览器兼容性 三.知 ...

  7. 1分钟快速制作漂亮的H5本地记事本

    大家好,以前给大家分享过一个五步骤制作精美的HTML5时钟的文章,点击回顾<五步教你制作漂亮精致的HTML时钟>,还有<一分钟教你如何实现唯美的文字描边>:今天给大家分享一个用 ...

  8. 【理论面试篇】收集整理来自网络上的一些常见的 经典前端、H5面试题 Web前端开发面试题

    ##2017.10.30收集 面试技巧 5.1 面试形式 1)        一般而言,小公司做笔试题:大公司面谈项目经验:做地图的一定考算法 2)        面试官喜欢什么样的人 ü  技术好. ...

  9. 【H5动画】谈谈canvas动画的闪烁问题

    一般来说,在H5开发中,使用canvas往往只是为了展示一些简单的图表或者简单短小的动画,很少考虑到有闪烁的问题. 最近,在手机QQ魔法表情的项目中,就遇到了奇葩的闪烁问题. 这里说的闪烁,是指动画刚 ...

随机推荐

  1. restful framework之权限组件

    一.权限简介 只用超级用户才能访问指定的数据,普通用户不能访问,所以就要有权限组件对其限制 二.局部使用 from rest_framework.permissions import BasePerm ...

  2. futuba R70085SB 接收机 只有SBus端口有输出其他端口输出不变

    接收机能收到遥控器信号,且Sbus端口有输出,其他端口输出没有变化,这时你要看一下接收机的模式了,肯定是遥控器的通道跟输出端口的通道不匹配.参考Futuba T14SG遥控器的说明书,如下图

  3. 树莓派修改VNC分辨率

    1.打开终端输入 sudo raspi-config 2. 选择 Advanced Options  再选择 Resolution 3.选择想要的分辨率,确定 4.重启

  4. Jmeter 数据库配置池设置IP为参数

    我在网上查了很多资料,发现jmter链接数据库的URL都是设置成固定值的.没有参数化. 当我需要使用配置文件链接不同服务器上的数据库的时候,发现无法实现. 原因在于:jmeter的元件执行优先级是配置 ...

  5. JUC——并发集合类

    如果要进行多个数据的保存,无疑首选类集(List.Set.Queue.Map),在类集的学习的时候也知道一个概念:许多集合的子类都具有同步与异步的差别,但是如果真的要在多线程之中去使用这些类,是否真的 ...

  6. Siki_Unity_7-4_高自由度沙盘游戏地图生成_MineCraft_Uniblocks插件（可拓展）

    Unity 7-4 高自由度沙盘游戏地图生成 MineCraft (插件Uniblocks) 任务1&2&3&4 素材 && 课程演示 && 课 ...

  7. NO--14 微信小程序，左右联动二

    上一篇讲解了左=>右联动,那个还比较简单,本篇写剩下比较核心的部分,也是本次开发过程中遇到最难的部分,右=>左联动,先简单看一下演示   右左联动.gif 一.关键技术: (1) 小程序 ...

  8. jsp servlet路径问题

    最近做小作业时饱受路径问题的困扰,记录一下: 当工程目录如上所示时,路径应该这么写: 情况1:根目录下 login.jsp中的表单提交给Servlet时,可以直接写Servlet名: <form ...

  9. Linux 文件系统 -- 简述几种文件类型

    Linux 中一切皆为文件,文件类型也有多种,使用 ls -l 命令可以查看文件的属性,所显示结果的第一列的第一个字符用来表明该文件的文件类型,如下: 1.普通文件 使用 ls -l 命令后,第一列第 ...

  10. FICO（费埃哲）评分系统有什么优缺点？在国内的发展怎么样？

    权威回答: FICO的优点很明显: 在美国数据库较全面.一般存储有最近7-10年的个人信用记录,包括银行信用.商业信用甚至保险等. 客观性.计算机自动完成评估工作,克服人为操作的失误. 快捷性.出结果 ...