<!DOCTYPE html>

<html>

<head>

<title>HTML5 Canvas Demo of clock</title>

<script>

function time(){

    var mycanvas=document.getElementById("myCanvasTag");

    var mycontext=mycanvas.getContext('2d');

    //清空画布，

    mycontext.clearRect(0,0,600,500)

    //时钟圆圈

    mycontext.beginPath();

    mycontext.arc(200,200,150,0,2*Math.PI);

    mycontext.stroke();

    //设置参数

    var myDate = new Date();

    mycontext.font='10px Arial'

    mycontext.fillText(myDate.toLocaleString(),20,20)

    var h=myDate.getHours();

    var m=myDate.getMinutes();

    var s=myDate.getSeconds();

    var deg = Math.PI/180;

    mycontext.beginPath();

    //移动旋转点

     mycontext.translate(200,200)

    //绘制大刻度

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

        mycontext.lineWidth=2;

        mycontext.rotate(30*deg)

        mycontext.moveTo(-140,0)

        mycontext.lineTo(-130,0)

    }

    mycontext.stroke()

    //绘制小刻度

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

        mycontext.lineWidth=1;

        mycontext.rotate(6*deg)

        mycontext.moveTo(-140,0)

        mycontext.lineTo(-135,0)

    }

    mycontext.stroke()    

    //绘制时针

    if(h>=12){h-=12}

    mycontext.rotate((30*h+m/2+s/10)*deg)

    mycontext.lineWidth=3;

    mycontext.moveTo(0,10);

    mycontext.lineTo(0,-100)

    mycontext.stroke()

    //绘制分针

    mycontext.rotate(-(30*h+m/2+s/10)*deg)

    mycontext.rotate((6*m+s/10)*deg)

    mycontext.lineWidth=2;

    mycontext.moveTo(0,10);

    mycontext.lineTo(0,-110)

    mycontext.stroke()

    mycontext.rotate(-(6*m+s/10)*deg)

    //绘制秒针

    mycontext.rotate(6*s*deg)

    mycontext.lineWidth=1;

    mycontext.moveTo(0,-120);

    mycontext.lineTo(0,20)

    mycontext.stroke()

    mycontext.rotate(-6*s*deg)

    //初始化旋转点

    mycontext.translate(-200,-200)

}

    setInterval(time,1000)

</script>

</head>

<body>

<div style="margin-left:30px;">

<canvas id="myCanvasTag" width="500" height="500"></canvas>

</div>

</body>

</html>

玩了一天多的canvas,写了个时钟玩，多有不足，望指教。

canvas写的一个小时钟demo的更多相关文章

  1. [原创]基于html5新标签canvas写的一个小画板

    最近刚学了canvas,写个小应用练习下 源代码 <!DOCTYPE> <html> <head> <meta http-equiv="Conten ...

  2. 之前为dd写的一个小的demo(robotium)

    测试类的编写: package com.m1905.dd.mobile; import com.robotium.solo.By; import com.robotium.solo.Solo; imp ...

  3. 1.类的加载机制_继承类的加载(一个小的Demo)说明

    今天我们先来一个小的Demo来了解类的加载顺序. public class ClassLoaderTest { public static void main(String[] args) { Sys ...

  4. 原生JS写了一个小demo，根据输入的数字生成不同背景颜色的小方块儿~

    昨天练习写了这个小demo,个人觉得通过设置定位元素left和top的值,来实现换行的功能,这种方法很巧妙~ 另外,如下代码中的随机颜色的获取,还请各位前辈多多指教:需要改进的地方:或者有没有更好的方 ...

  5. 用bat写的一个小病毒

    最近看了一点bat的知识,具体说是看了一个博客:http://blog.csdn.net/qsyzb/article/details/17364581 用了三天才看完=.=,感觉作者整理整理可以把博客 ...

  6. QT写的一个小工具:阿里云MQTT连接参数生成器.

    一.工具介绍. 最近在研究MQTT协议联网的一些问题,现在主流的物联网平台都支持MQTT协议. 在做阿里云平台连接测试的时候,连接参数的生成没有好用的工具, 所以就自己写了一个. 这个工具主要用于阿里 ...

  7. js 利用throw 写的一个小程序

    在下边的小程序中比较特殊的是使用isNaN()函数判断一个参数是不是数字, <!DOCTYPE html> <!DOCTYPE html> <html> <h ...

  8. python3 自己写的一个小算法（比对中文文本相似度）

    函数使用说明: 函数的三个参数分别是“匹配语句”,“匹配语料”,“相关度”: 匹配语句,和匹配预料中的语句匹配的语句,必须为字符串: 匹配语料,被匹配语句来匹配的语句列表,必须为列表: 相关度,函数只 ...

  9. canvas写的一个刮奖效果

    <!DOCTYPE html><head> <meta charset="utf-8"> <meta http-equiv="X ...

随机推荐

  1. <Win32_5>深入浅出Win32的计时器

    说起时间,对于我们搞IT的人来说,那是要多重要有多重要.我觉得有价值的时间是给有抱负和有才能的人准备的,因为他们会充分利用,不会让时间失望…… 呵呵,有点儿说远了,还是回归主题吧 Win32的计时器其 ...

  2. 无法捕获的异常：MissingMethodException

    今天一个同事发布站点,一直出现一些稀奇古怪的问题,各种各样的异常都有,根据这些异常去排查代码,都完全正常,很让人郁闷,因为代码里可能出异常的地方都记录了程序日志,所以他一直没去排查系统里的“应用程序日 ...

  3. Mysql学习（慕课学习笔记7）修改数据表（下）

    添加主键约束 ALTER TABLE tb1_name ADD [CONSTRAINT [symbol]] PRIMARY KEY [index_type] (index_col_name,…….) ...

  4. 【android】修改android默认应用图标

    我自己做的一个小程序,想更改程序安装后的默认显示图片,但是我发现只能改一次,以后再改还是显示第一次更改后的图片(此时我已把最后一次更改前的全部图片都删除了,所以不会是名称填错),这是为什么??求高人指 ...

  5. JSONP有什么作用

    1.解决跨域访问数据                 由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名.协议.端口)的资源,为了实现跨域请求,可以通过script标签实现跨域请求 ...

  6. 关于Repeater中绑定的控件不触发ItemCommand事件

    今天遇到 在repeater 中使用一个button,点击button然后跳转另外一个页面. html. <asp:Repeater ID="repeater" runat= ...

  7. mysql查询unicode字符串

    mysql查询的时候会将\干掉,可以用mysql的like通配符来做like '%\u5f20\u4e09%'变成like '%_u5f20_u4e09%'

  8. IOS 开发之文件管理

    一.iOS中的沙盒机制 iOS应用程序只能对自己创建的文件系统读取文件,这个独立.封闭.安全的空间,叫做沙盒.它一般存放着程序包文件(可执行文件).图片.音频.视频.plist文件.sqlite数据库 ...

  9. BZOJ 1927 星际竞速

    http://www.lydsy.com/JudgeOnline/problem.php?id=1927 思路:把一个点拆成两个点, S->i 费用0,流量1 (代表这个点可以移动到其他点所必备 ...

  10. Unix/Linux环境C编程入门教程(39) shell命令之系统管理

    df命令 用于检测文件系统的磁盘空间占用和空余情况,可以显示所有文件系统对节点和磁盘块的使用情况.命令的使用格式如下: df  [选项] 常用参数及含义如下表所示. df -a:显示所有文件系统的磁盘 ...