<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

body{

    background:pink;

    }

#c1{

    background:white;

    }

</style>

<script>

    window.onload = function ()

    {

        var oc = document.getElementById('c1');

        var ogc = oc.getContext('2d');

        function toDraw()

        {

            var x = 200;

            var y = 200;

            var r = 150;

            ogc.clearRect(0,0,oc.width,oc.height);

            var aDate = new Date();

            var oHouse = aDate.getHours();

            var oMin = aDate.getMinutes();

            var oSen = aDate.getSeconds();

            var oHoursevalue = ( -90 + oHouse*30 + oMin/2)*Math.PI/180;

            var oMinvalue = ( -90 + oMin*6 )*Math.PI/180;

            var oSenvalue = ( -90 + oSen*6)*Math.PI/180;

            ogc.beginPath();

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

            {

                ogc.moveTo(x,y);

                ogc.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);

                ogc.stroke();

            }

            ogc.closePath();

            ogc.beginPath();

            ogc.fillStyle = 'white';

            ogc.moveTo(x,y);

            ogc.arc(x,y,r*19/20,0,360,false);

            ogc.fill();

            ogc.closePath();

            ogc.beginPath();

            ogc.lineWidth = 3

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

            {

                ogc.moveTo(x,y);

                ogc.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);

                ogc.stroke();

            }

            ogc.closePath();

            ogc.beginPath();

            ogc.fillStyle = 'white';

            ogc.moveTo(x,y);

            ogc.arc(x,y,r*18/20,0,360,false);

            ogc.fill();

            ogc.closePath();

            ogc.beginPath();

            ogc.lineWidth = 5

            ogc.moveTo(x,y);

            ogc.arc(x,y,r*5/20,oHoursevalue,oHoursevalue,false);

            ogc.stroke();

            ogc.closePath();

            ogc.beginPath();

            ogc.lineWidth = 3

            ogc.moveTo(x,y);

            ogc.arc(x,y,r*8/20,oMinvalue,oMinvalue,false);

            ogc.stroke();

            ogc.closePath();

            ogc.beginPath();

            ogc.lineWidth = 1

            ogc.moveTo(x,y);

            ogc.arc(x,y,r*18/20,oSenvalue,oSenvalue,false);

            ogc.stroke();

            ogc.closePath();

        }

        toDraw();

        setInterval(toDraw,1000);

    }

</script>

</head>

<body>

<canvas id="c1" width="400" height="400"></canvas>

</body>

</html>

html5 canvas 钟表的更多相关文章

  1. js实现一个简单钟表动画(javascript+html5 canvas)

    第一次在博客园注册发博.有一次去人家单位开标,看到开标网站上有个钟表动画,一时兴起,就写了个简单的钟表动画. 用js和html5 canvas对象实现一个简单钟表程序 主要用到的就是h5的canvas ...

  2. HTML5 Canvas 绘制二十四字真言钟表

    代码: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type ...

  3. HTML5 Canvas 画钟表

    画钟表是2D画图的老生常谈,我也不能免俗弄了一个.代码如下: <!DOCTYPE html> <html lang="utf-8"> <meta ht ...

  4. html5 canvas时钟

    基础知识点:                canvas标签只是图形容器,您必须使用脚本来绘制图形. getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性.——获取上 ...

  5. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

  6. 赠书：HTML5 Canvas 2d 编程必读的两本经典

    赠书:HTML5 Canvas 2d 编程必读的两本经典 这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide( ...

  7. 如何开发一个简单的HTML5 Canvas 小游戏

    原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...

  8. html5 canvas常用api总结(一)

    1.监听浏览器加载事件. window.addEventListener("load",eventWindowLoaded,false); load事件在html页面加载结束时发生 ...

  9. HTML5 Canvas绘制转盘抽奖

    新项目:完整的Canvas转盘抽奖代码 https://github.com/givebest/GB-canvas-turntable 演示 http://blog.givebest.cn/GB-ca ...

随机推荐

  1. 加密解密(5)SSL形象比喻

    转自: http://blog.csdn.net/cloverphp/article/details/11737433 前言: 关于公钥,私钥请看前几篇文章   SSL 协议既用到了公钥加密技术(握手 ...

  2. Create Entity Data Model

    http://www.entityframeworktutorial.net/EntityFramework5/create-dbcontext-in-entity-framework5.aspx 官 ...

  3. Linux多线程（三）（同步互斥）

    1. 线程的同步与互斥 1.1. 线程的互斥 在Posix Thread中定义了一套专门用于线程互斥的mutex函数.mutex是一种简单的加锁的方法来控制对共享资源的存取,这个互斥锁只有两种状态(上 ...

  4. 【英语】Bingo口语笔记(47) - 关于马的表达

    beat a dead horse 浪费口舌

  5. phonegap 清空页面缓存

    访问页面添加 <meta HTTP-EQUIV="pragma" CONTENT="no-cache"> <meta HTTP-EQUIV=& ...

  6. 基于jQuery的AJAX和JSON的实例

    通过jQuery内置的AJAX功能,直接访问后台获得JSON格式的数据,然后通过jQuer把数据绑定到事先设计好的html模板上,直接在页面上显示. 我们先来看一下html模板:            ...

  7. socket基础函数（2）

    http://www.cnblogs.com/RascallySnake/archive/2013/07/11/3185071.html   一.select  winsock中 #include & ...

  8. POJ 2241 Mondriaan's Dream

    题意:给一块n×m的空地,用1×2的砖铺,有多少种方案. 解法:状压dp.考虑dp[i][j]表示前i - 1行都铺满时第i行的状态为j时的方案数.对于第i行,每个格子上是否有砖用0和1表示,0表示不 ...

  9. C#对Excel打印时，PageSetup 对象详解

    PageSetup 对象包含所有页面设置的属性(左边距.底部边距.纸张大小等).下面按“页面”.“页边距”.“页眉/页脚”.“工作表”和“无对应选项卡”五个类别,逐一介绍. 一.页面 与“页面”选项卡 ...

  10. cocoa NSFileManager

    NSFileManager中包含了用来查询单词库目录.创建.重命名.删除目录以及获取/设置文件属性的方法(可读性,可编写性等等). 每个程序都会有它自己的沙盒,通过它你可以阅读/编写文件.写入沙盒的文 ...