这是以前自己练习写的一个画布时钟

<!DOCTYPE html>
<html lang="en">
　　<head>
　　　　<meta charset="UTF-8">
　　　　<title></title>
　　　　<style>
　　　　　　canvas{
　　　　　　margin: 20px 400px 0;
　　　　　　}
　　　　</style>
　　</head>
　　<body>
　　　　<canvas width="500px" height="500px"></canvas>

　　　　<script>
　　　　　　var can=document.getElementsByTagName("canvas")[0];
　　　　　　var x=can.getContext("2d");

　　　　　　function clock(){

　　　　　　　　//每次执行代码清楚一次画布
　　　　　　　　x.clearRect(0,0,500,500);

　　　　　　　　//画一个蓝色实心圆
　　　　　　　　x.beginPath();
　　　　　　　　x.fillStyle="blue";
　　　　　　　　x.arc(250,250,250,Math.PI*0/180,Math.PI*360/180);
　　　　　　　　x.fill();
　　　　　　　　x.closePath();

　　　　　　　　//再来一个白色填充圆，半径小于上边的蓝色填充圆，这样就会出现一个蓝色的圆环
　　　　　　　　x.beginPath();
　　　　　　　　x.fillStyle="#ffffff";
　　　　　　　　x.arc(250,250,230,Math.PI*0/180,Math.PI*360/180);
　　　　　　　　x.fill();
　　　　　　　　x.closePath();

　　　　　　　　//分钟刻度，通过循环画出60根分钟刻度，360/6 得出每个得间隔
　　　　　　　　for(var i=0;i<60;i++){
　　　　　　　　　　x.save(); //保存环境变量
　　　　　　　　　　x.beginPath();
　　　　　　　　　　x.lineWidth=2;
　　　　　　　　　　x.translate(250,250);
　　　　　　　　　　x.rotate(i*6*Math.PI/180); //每个刻度间隔是6° ，所以i*6 在进行旋转就画出了所有刻度
　　　　　　　　　　x.moveTo(0,220);
　　　　　　　　　　x.lineTo(0,230);
　　　　　　　　　　x.stroke();
　　　　　　　　　　x.closePath();
　　　　　　　　　　x.restore();  //返回环境变量
　　　　　　　　}

　　　　　　　　//时钟刻度，时钟刻度只有12个所以，360/12 每个之间的间隔是30°，原理和分钟刻度相同当然你还可以循环更多，比如刻度换为数字
　　　　　　　　for(var a=0;a<12;a++){
　　　　　　　　　　x.save();
　　　　　　　　　　x.beginPath();
　　　　　　　　　　x.lineWidth=4;
　　　　　　　　　　x.translate(250,250);
　　　　　　　　　　x.rotate(a*30*Math.PI/180);
　　　　　　　　　　x.moveTo(0,215);
　　　　　　　　　　x.lineTo(0,230);
　　　　　　　　　　x.stroke();
　　　　　　　　　　x.closePath();
　　　　　　　　　　x.restore();
　　　　　　　　}

　　　　　　　　//获取当前的本地时间，并分别获取，时，分，秒，时和分都要精确到小数点后

　　　　　　　　var time=new Date();
　　　　　　　　var seconds=time.getSeconds();
　　　　　　　　var minutes=time.getMinutes()+seconds/60;
　　　　　　　　var hours=time.getHours()+minutes/60;

　　　　　　　　//当大于12的时候也就是要进入13点了 也就是1点  所以要减去12
　　　　　　　　if(hours>12){
　　　　　　　　　　hours=hours-12
　　　　　　　　};

　　　　　　　　//表盘上显示本地时间，如2017/06/14 下午 20：23

　　　　　　　　x.beginPath()
　　　　　　　　x.font="20px 黑体"
　　　　　　　　x.strokeText(time.toLocaleString(),150,200)
　　　　　　　　x.closePath();

　　　　　　　　//时
　　　　　　　　x.save();
　　　　　　　　x.translate(250,250)
　　　　　　　　x.lineWidth=4;
　　　　　　　　x.beginPath();
　　　　　　　　x.rotate(hours*30*Math.PI/180);//画好时针后当前的小时*30就是应该旋转的°数。
　　　　　　　　x.moveTo(0,10);
　　　　　　　　x.lineTo(0,-180);
　　　　　　　　x.stroke();
　　　　　　　　x.closePath();
　　　　　　　　x.restore();

　　　　　　　　//分
　　　　　　　　x.save();
　　　　　　　　x.beginPath();
　　　　　　　　x.translate(250,250)
　　　　　　　　x.lineWidth=3;
　　　　　　　　x.rotate(minutes*6*Math.PI/180); //分针同理
　　　　　　　　x.moveTo(0,10);
　　　　　　　　x.lineTo(0,-200)
　　　　　　　　x.stroke();
　　　　　　　　x.closePath();
　　　　　　　　x.restore();

　　　　　　　　//秒
　　　　　　　　x.save();
　　　　　　　　x.beginPath();
　　　　　　　　x.translate(250,250);
　　　　　　　　x.lineWidth=2;
　　　　　　　　x.rotate(seconds*6*Math.PI/180);//秒针也一样
　　　　　　　　x.moveTo(0,10);
　　　　　　　　x.lineTo(0,-210);
　　　　　　　　x.stroke();
　　　　　　　　x.closePath();
　　　　　　　　x.restore();

　　　　　　　　//秒针上的小圆点

　　　　　　　　x.save();
　　　　　　　　x.beginPath();
　　　　　　　　x.translate(250,250);
　　　　　　　　x.rotate(seconds*6*Math.PI/180);//让秒针小圆点随秒针位置，其实和秒针相同
　　　　　　　　x.fillStyle="blue";
　　　　　　　　x.arc(0,-170,4,0,Math.PI*360/180);
　　　　　　　　x.fill();
　　　　　　　　x.closePath();
　　　　　　　　x.restore();

//中心蓝色小圆点

　　　　　　　　x.beginPath();
　　　　　　　　x.fillStyle="blue"
　　　　　　　　x.arc(250,250,6,0,Math.PI*360/180);
　　　　　　　　x.fill();
　　　　　　　　x.closePath();

　　　　　　　　//中心红色小圆点

　　　　　　　　x.beginPath();
　　　　　　　　x.fillStyle="red"
　　　　　　　　x.arc(250,250,3,0,Math.PI*360/180);
　　　　　　　　x.fill();
　　　　　　　　x.closePath();

　　　　　　}
　　　　　　setInterval(clock,1000); //隔一秒运行一下这方法，先会清空掉画布然后重新画这样每秒时间都在动了。
　　</script>
</body>
</html>

效果

　

canvas-菜鸟版画布时钟的更多相关文章

  1. 基于canvas的原生JS时钟效果

    概述 运用html5新增画布canvas技术,绘制时钟效果,无需引用任何插件,纯js. 详细 代码下载:http://www.demodashi.com/demo/11935.html 给大家介绍一个 ...

  2. html5 canvas简易版捕鱼达人游戏源码

    插件描述:html5利用canvas写的一个js版本的捕鱼,有积分统计,鱼可以全方位移动,炮会跟着鼠标移动,第一次打开需要鼠标移出背景图,再移入的时候就可以控制炮的转动,因为是用的mouseover触 ...

  3. Canvas组件：画布，可以实现动画操作。

    Module  10 Canvas组件:画布,可以实现动画操作. TextArea:文本域. 在单行文本域中回车会激发ActionEvent. 用CheckBoxGroup实现单选框功能. Java中 ...

  4. Canvas组件：画布，可以实现动画操作

    Canvas组件:画布,可以实现动画操作. TextArea:文本域. 在单行文本域中回车会激发ActionEvent. 用CheckBoxGroup实现单选框功能. Java中,单选框和复选框都是使 ...

  5. USBasp制作资料及全过程（菜鸟版）

    源:USBasp制作资料及全过程(菜鸟版) 一.usbasp 的一般性介绍: 1.下载线,是“ISP”(In System Programmability:“在系统编程”)或“IAP”(In Appl ...

  6. 通过Canvas + JS 实现简易时钟实战

    最近通过各种渠道学习了下html5中的canvas元素,为了练练手就随手写了一个简易的时钟.时钟本身不复杂,没有使用图片进行美化,下面就与大家分享一下具体的代码: 这是最终实现的效果: 部分的启发点来 ...

  7. 公告栏添加时钟——利用canvas画出一个时钟

    前言 最近在学习HTML5标签,学到Canvas,觉得很有趣.便在慕课网找了个demo练手.就是Canvas时钟. 对于canvas,w3shcool上是这么描述的: HTML5 <canvas ...

  8. 用canvas绘制一个简易时钟

    在见识了html5中canvas的强大,笔者准备制作一个简易时钟. 下面就是成果啦,制作之前我们先分析一下,绘制一个时钟需要做哪些准备. 一 . 1.首先这个时钟分为表盘,指针(时针,分针,秒针)和数 ...

  9. Html 5 版 电子时钟

    效果图: html 5 canvas元素  Html 5的canvas元素可以用于在网页上绘制图形[即canvas的作用]. canvas画布使用JavaScript在网页上绘制图形 其拥有绘制各种路 ...

随机推荐

  1. ansible基本模块-copy

    ansible   XXX   -m copy  -a  “src=XXX  dest=XXX  owner=root  group=root  mode=0755”

  2. C++_类入门5-智能指针模板类

    智能指针是行为类似于指针的类对象,但这种对象还有其他功能. 本节介绍三个可帮助管理动态内存分配的智能指针模板(auto_ptr.unique_ptr和shared_ptr). void remodel ...

  3. Django 中 admin 的执行流程

    Django 中 admin 的执行流程 1 循环加载执行所有已经注册的 app 中的 admin.py 文件 def autodiscover(): autodiscover_modules('ad ...

  4. 洛谷P1443 马的遍历（bfs，注意输出格式）

    题目描述 有一个n*m的棋盘(1<n,m<=400),在某个点上有一个马,要求你计算出马到达棋盘上任意一个点最少要走几步 输入输出格式 输入格式: 一行四个数据,棋盘的大小和马的坐标 输出 ...

  5. jQuery常用的方法

    each() 以每一个匹配的元素作为上下文来执行一个函数. size()  jQuery 对象中元素的个数.

  6. 升级TeeChart pro

    teechart 安装流程如下: 1.  将生成的 LIB中的 选中文件copy到C:\Users\Public\Documents\RAD Studio\8.0\Dcp 图1 1.  fastrep ...

  7. 阿里云Centos 7上面安装mysql教程

    1 软件的基本安装过程 1 卸载已有的mysql 1.查看系统是否安装了mysql软件 rpm -qa|grep -i mysql 2.将已经安装过的软件卸载掉.注意:这样的卸载是不彻底,不过这里够用 ...

  8. net.sf.json.JSONException: There is a cycle in the hierarchy! 转json死循环问题解决

    解决上述问题遵照两个原则就可以: 1.页面不需要展示关联数据时 解决:将关联对象属性排除掉 2.页面需要展示关联数据时 解决:将关联对象改为立即加载,并且将关联对象中的属性排除

  9. 【问题记录】 Linux 安装 apache 遇到的一些问题

    以下为linux上安装apache时自己遇到的一些问题,记录在这,以后遇到时也会不定时更新... 一.安装Apache提示APR not found的解决办法 解决方法: 1. 网站 http://a ...

  10. mongodb随机查询一条记录的正确方法！

    关于从mongodb库中随机取出一条记录的方法的博文很多,其中都提到了下面三种方法: 1.skip过随机数量的记录. DBCursor cursor = coll.find(query); int r ...