<!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. itnesse实现api接口自动化测试学习

    上午在园子里乱逛,看了不少小伙伴们分享的接口测试方面的知识,大家所叙述到的一些经验或多或少,我也曾遇到过,突然意识到知识的点滴积累是多么的重要,我记得我最早接触接口测试的时候,就是只在浏览器里人工测试 ...

  2. Mac AppStore下载文件的获取

    有时候希望把在mac AppStore下载的App共享给其他人,但是application里面的都是已经安装的应用,那么如何找到pkg安装文件呢? (后附:注意事项!) 方法一: 1.首先下载一个Ap ...

  3. Android Wear开发者预览配置过程

    第一步Android SDK Manager 中 1.升级Android SDK Tools到22.6+版本2.Android 4.4.2 下 安装 Android Wear ARM EABI v7a ...

  4. URAL1355. Bald Spot Revisited

    1355 其实就是求质因子的个数 这样肯定是最多的 注意一下 除到最后不是1的情况 #include <iostream> #include<cstdio> #include& ...

  5. Git基础(二)

    本章内容将介绍第二部分:本地仓储操作.为了加深对每个命令操作的理解,我们可以事先获取一个仓储边学边操作.这里首先 你要明白一个概念,所有本地工作目录下的文件状态无不在乎两种,已跟踪和未跟踪.已跟踪文件 ...

  6. ssh传输出现encountered 1 errors during the transfer解决办法

    以下方法简单排序,从简单到复杂: 法一:在SSH Secure File Transfer(上传文件那个),打开“Operation”菜单,打开“File Transfer Mode”子菜单,再选择“ ...

  7. 漫游Kafka设计篇之性能优化

    Kafka在提高效率方面做了很大努力.Kafka的一个主要使用场景是处理网站活动日志,吞吐量是非常大的,每个页面都会产生好多次写操作.读方面,假设每个消息只被消费一次,读的量的也是很大的,Kafka也 ...

  8. find命令下的atime,ctime,mtime

    Linux下的find命令在目录结构中搜索文件,并执行指定的操作.linux下的find命令提供了相当多的查找条件,功能很强大,由于find的功能很强大,所以他的选项也很多,今天我们来细说一下find ...

  9. HDU 5366 The mook jong （简单DP）

    题意:ZJiaQ希望把木人桩摆在自家的那个由1*1的地砖铺成的1*n的院子里.由于ZJiaQ是个强迫症,所以他要把一个木人桩正好摆在一个地砖上,由于木人桩手比较长,所以两个木人桩之间地砖必须大于等于两 ...

  10. Web开发基础

    一.后台 1.MyEclipse:Java Web的编辑器 2.Java Servlet:后台代码 3.Velocity:前后台接口 4.mySql:数据库 二.前台 1.js:前台代码 2.jQue ...