原理代码如下：

　　

<!DOCTYPE html>

<html lang="en">

　　<head>

　　　　<meta charset="UTF-8">

　　　　<title></title>

　　　　<style>

　　　　　　canvas{

　　　　　　margin: 20px 400px ;

　　　　　　}

　　　　</style>

　　</head>

　　<body>

　　　　<canvas width="500px" height="500px"></canvas>

　　　　<script>

　　　　　　var can=document.getElementsByTagName("canvas")[];

　　　　　　var x=can.getContext("2d");

　　　　　　function clock(){

　　　　　　　　//每次执行代码清楚一次画布

　　　　　　　　x.clearRect(,,,)

　　　　　　　　//创建一个实心圆

　　　　　　　　x.beginPath();

　　　　　　　　x.fillStyle="blue";

　　　　　　　　x.arc(,,,Math.PI*/,Math.PI*/)

　　　　　　　　x.fill()

　　　　　　　　x.closePath();

　　　　　　　　//再来一个白色的小圆

　　　　　　　　x.beginPath();

　　　　　　　　x.fillStyle="#ffffff";

　　　　　　　　x.arc(,,,Math.PI*/,Math.PI*/)

　　　　　　　　x.fill()

　　　　　　　　x.closePath();

　　　　　　　　//分钟刻度

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

　　　　　　　　　　x.save()

　　　　　　　　　　x.beginPath();

　　　　　　　　　　x.lineWidth=;

　　　　　　　　　　x.translate(,)

　　　　　　　　　　x.rotate(i**Math.PI/)

　　　　　　　　　　x.moveTo(,)

　　　　　　　　　　x.lineTo(,)

　　　　　　　　　　x.stroke()

　　　　　　　　　　x.closePath();

　　　　　　　　　　x.restore()

　　　　　　　　}

　　　　　　　　//时钟刻度

　　　　　　　　for(var a=;a<;a++){

　　　　　　　　　　x.save();

　　　　　　　　　　x.beginPath()

　　　　　　　　　　x.lineWidth=;

　　　　　　　　　　x.translate(,);

　　　　　　　　　　x.rotate(a**Math.PI/);

　　　　　　　　　　x.moveTo(,)

　　　　　　　　　　x.lineTo(,)

　　　　　　　　　　x.stroke();

　　　　　　　　　　x.closePath();

　　　　　　　　　　x.restore();

　　　　　　　　}

　　　　　　　　var time=new Date();

　　　　　　　　var miao=time.getSeconds();

　　　　　　　　var fen=time.getMinutes() + miao/;

　　　　　　　　var hours=time.getHours() + fen/;

　　　　　　　　if(hours>){

　　　　　　　　　　hours=hours-

　　　　　　　　}

　　　　　　　　x.beginPath()

　　　　　　　　x.font="20px 黑体"

　　　　　　　　x.strokeText(time.toLocaleString(),,)

　　　　　　　　x.closePath();

　　　　　　　　//时

　　　　　　　　x.save()

　　　　　　　　x.translate(,)

　　　　　　　　x.lineWidth=;

　　　　　　　　x.beginPath();

　　　　　　　　x.rotate(hours**Math.PI/)

　　　　　　　　x.moveTo(,);

　　　　　　　　x.lineTo(,-)

　　　　　　　　x.stroke()

　　　　　　　　x.closePath();

　　　　　　　　x.restore()

　　　　　　　　//分

　　　　　　　　x.save()

　　　　　　　　x.beginPath();

　　　　　　　　x.translate(,)

　　　　　　　　x.lineWidth=;

　　　　　　　　x.rotate(fen**Math.PI/)

　　　　　　　　x.moveTo(,);

　　　　　　　　x.lineTo(,-)

　　　　　　　　x.stroke()

　　　　　　　　x.closePath();

　　　　　　　　x.restore()

　　　　　　　　//秒

　　　　　　　　x.save()

　　　　　　　　x.beginPath();

　　　　　　　　x.translate(,)

　　　　　　　　x.lineWidth=;

　　　　　　　　x.rotate(miao**Math.PI/)

　　　　　　　　x.moveTo(,);

　　　　　　　　x.lineTo(,-)

　　　　　　　　x.stroke()

　　　　　　　　x.closePath();

　　　　　　　　x.restore()

　　　　　　　　//秒针上的小圆点

　　　　　　　　x.save()

　　　　　　　　x.beginPath();

　　　　　　　　x.translate(,)

　　　　　　　　x.rotate(miao**Math.PI/)

　　　　　　　　x.fillStyle="blue";

　　　　　　　　x.arc(,-,,,Math.PI*/)

　　　　　　　　x.fill()

　　　　　　　　x.closePath();

　　　　　　　　x.restore()

                //中心蓝色小圆点 

　　　　　　　　x.beginPath();

　　　　　　　　x.fillStyle="blue"

　　　　　　　　x.arc(,,,,Math.PI*/)

　　　　　　　　x.fill()

　　　　　　　　x.closePath();

　　　　　　　　//中心红色小圆点

　　　　　　　　x.beginPath();

　　　　　　　　x.fillStyle="red"

　　　　　　　　x.arc(,,,,Math.PI*/)

　　　　　　　　x.fill()

　　　　　　　　x.closePath();

　　　　　　}

　　　　　　setTimeout(clock,)

　　　　　　setInterval(clock,)

　　</script>

</body>

</html>

效果图：

canvas画布，时钟的更多相关文章

  1. 使用canvas绘制时钟

    使用canvas绘制时钟  什么使canvas呢?HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图 ...

  2. HTML5 之Canvas 绘制时钟 Demo

    <!DOCTYPE html> <html> <head> <title>Canvas 之 时钟 Demo</title> <!--简 ...

  3. [ZZ+CH] Html5 canvas+js 时钟

    总之新Blog入驻以后,又开始老习惯,到处折腾自定义的空间,放些东西. 想起以前大一的时候做过一个Javascript的时间显示器,现在想做一个时钟,当然现在老奸巨猾,会先去看一看有前辈写过没. 前辈 ...

  4. canvas粒子时钟

    前面的话 本文将使用canvas实现粒子时钟效果 效果展示 点阵数字 digit.js是一个三维数组,包含的是0到9以及冒号(digit[10])的二维点阵.每个数字的点阵表示是7*10大小的二维数组 ...

  5. canvas画时钟，重拾乐趣!

    canvas时钟--效果图 一.先来简单介绍画时钟需要的canvas知识 1.在HTML页面中添加canvas元素,必须定义canvas元素的id属性值以便接下来的调用. HTML代码: <ca ...

  6. Canvas：时钟

    这个时钟是将钟盘的圆心点移到了 canvas 画布中心点.以方便后面的方位计算 ctx.translate(width/2,height/2); 现定义一个圆盘来显出这个时钟的基本位置 ctx.sav ...

  7. canvas-菜鸟版画布时钟

    这是以前自己练习写的一个画布时钟 <!DOCTYPE html><html lang="en"> <head> <meta charset ...

  8. [JS,Canvas]日历时钟

    [JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8&q ...

  9. html 5 canvas画布整理

    1. 创建canvas画布<canvas id="myCanvas" width="800" height="800" >< ...

  10. 用html5的canvas画布绘制贝塞尔曲线

    查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

随机推荐

  1. 算法训练 K好数 数位DP+同余定理

    思路:d(i,j)表示以i开头,长度为j的K好数的个数,转移方程就是 for(int u = 0; u < k; ++u) { int x = abs(i - u); if(x == 1) co ...

  2. 《python机器学习—预测分析核心算法》笔记1

    参见原书 1.1-1.4节 一.惩罚线性回归模型 基本特性: 1.训练时间快,使用训练好的模型进行预测的时间也快2.应用于高速交易.互联网广告的植入等3.解决回归.分类问题 最重要的特性:能明确指出, ...

  3. Docker mongodb 3.4 分片 一主 一副 一仲 鉴权集群部署.

    非docker部署 为了避免过分冗余,并且在主节点挂了,还能顺利自动提升,所以加入仲裁节点 为什么要用docker部署,因为之前直接在虚拟机启动10个mongod 进程.多线程并发测试的时候,mong ...

  4. MyCat 枚举分片设计思考,查询命中条件

    Mycat多租户实现的两种方式 MyCat,各种分片规则,仅保证插入的时候分片.表关联,join,查询怎么命中分片条件,还是需要设计. 今天稍微测了一下. ER 分片,此方式,插入的时候能分片,但是查 ...

  5. java：list排序

    第一种方法:就是list中对象(bean文件)实现Comparable接口,代码如下: package com.mapred.entity; public class Bar implements C ...

  6. Procedure execution failed 2013 - Lost connection to MySQL server during query

    1 错误描述 Procedure execution failed 2013 - Lost connection to MySQL server during query 2 错误原因 由错误描述可知 ...

  7. Java注释分类

    Java注释分类 1.单行注释    //打印结果    System.out.println("结果是:"+result); 2.多行注释    /**     * @autho ...

  8. Axure使用心得分享

    因为之前很少涉及到原型设计,所以对这个原型设计工具也不太熟悉,第一次使用走了不少的弯路,在这里把自己在使用过程中的心得跟大家分享一下,希望能够对大家有所帮助. 一. 元素的选择 我觉得这是Axure原 ...

  9. 芝麻HTTP：TensorFlow基础入门

    本篇内容基于 Python3 TensorFlow 1.4 版本. 本节内容 本节通过最简单的示例 -- 平面拟合来说明 TensorFlow 的基本用法. 构造数据 TensorFlow 的引入方式 ...

  10. OpenStack_I版 1.准备过程

    openstack是一个开源云平台,python开发   此次部署为实验环境, 采用扁平化简单的网络架构部署                       优点:低耦合的,模块化            ...