原理代码如下：

　　

<!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. GCD实现倒计时

    之前面试中,好多面试官,问使用GCD如何实现倒计时,我当时也没写过,所以一时不知道怎么说,所以结束之后,我实现一下GCD的倒计时. - (void)startTime:(UIButton *)send ...

  2. nyoj161 取石子 (四） 威佐夫博弈

    思路:详细证明见博弈总结 如何判断威佐夫博弈的奇异局势? 对于状态(a, b),c = b - a,如果是奇异局势必定满足 a == c * (1+√5)/ 2. AC代码 #include < ...

  3. scrapy 中日志的使用

    我在后台调试 在后台调试scrapy spider的时候,总是觉得后台命令窗口 打印的东西太多了不便于观察日志,因此需要一个日志文件记录信息,这样以后会 方便查找问题. 分两种方法吧. 1.简单粗暴. ...

  4. nginx的环境配置的问题

    在安装好nginx之后,运行nginx,报错: nginx dyld: Library not loaded: /usr/local/lib/libpcre.1.dylib Referenced fr ...

  5. Flask Ansible自动化平台搭建（持续更新）

    一:简介 使用Ansible + Flask + Celery搭建web平台. 目录结构 . ├── ansible_api │   ├── ansible_playbook_inventory.py ...

  6. React是什么，为什么要使用它？

    React是Facrbook内部的一个JavaScript类库,已于1年开源,可用于创建Web用户交互界面.它引入了一种新的方式来处理浏览器DOM.那些需要手动更新DOM.费力地记录每一个状态的日子一 ...

  7. eclipse web and java ee development

    1.打开Eclipse ->help ->install new software 2.Work with:http://download.eclipse.org/releases/gan ...

  8. MyBatis框架概述

    MyBatis是一个优秀的持久层框架,它对jdbc的操作数据库的过程进行封装,使开发者只需要关注SQL本身,而不需要花费精力去处理例如注册驱动.创建connection.创建statement.手动设 ...

  9. 【Unity3D】Unity3D开发《我的世界》之七、番外篇

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/unity_minecraft_07.html 本来上一篇就结束了,但是有小伙伴私信我觉得还差了很多重要的内容,比如 ...

  10. java线程池的原理及实现

    1.线程池简介:     多线程技术主要解决处理器单元内多个线程执行的问题,它可以显著减少处理器单元的闲置时间,增加处理器单元的吞吐能力.         假设一个服务器完成一项任务所需时间为:T1 ...