<!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. 使用注解@Transient使表中没有此字段

    注意,实体类中要使用org.springframework.data.annotation.Transient 在写实体类时发现有加@Transient注解的 加在属性声明上,但网上有加到get方法上 ...

  2. python中的StringIO模块

    python中的StringIO模块 标签:python StringIO 此模块主要用于在内存缓冲区中读写数据.模块是用类编写的,只有一个StringIO类,所以它的可用方法都在类中.此类中的大部分 ...

  3. Android手机配置gcc,实现手机编译代码

    1.下载gcc.zip 2.把gcc.zip解压存放在/data目录下(也可以是其他目录,看个人习惯) 3.配置gcc环境变量 export GCCHOME=/data/gcc (gcc存放路径) e ...

  4. 使用AlarmManager进行定时任务处理

    1:UploadingService.java package com.example.service; import com.example.broadcast.AlarmReceiver; imp ...

  5. HDU 4009 Transfer water

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4009 题意:给出一个村庄(x,y,z).每个村庄可以挖井或者修建水渠从其他村庄得到水.挖井有一个代价, ...

  6. OpenSSl 加密解密 示例(终于有编程实践了)

    OPenSSl的加密主要有三个重要的函数.看懂下面的代码就基本上知道该如何使用openssL来加密了. 不过注意,要先将libssl.so.1.0和libcrypto.so.1.0文件复制到执行的文件 ...

  7. 转:Asp.Net MVC中DropDownListFor的用法

    在Asp.Net MVC中可以用DropDownListFor的方式来让用户选择已定列表中的一个数值.用法不复杂,这里简单做一个记录. 首先我们要定义一个 Model ,用户在 DropDownLis ...

  8. C# 文件夹操作

    追加文件    StreamWriter sw = File.AppendText(Server.MapPath(] != Path.DirectorySeparatorChar)         a ...

  9. STL中istream_iterator和ostream_iterator的基本用法

    标准程序库定义有供输入及输出用的iostream iterator类,称为istream_iterator和ostream_iterator,分别支持单一型别的元素读取和写入.使用这两个iterato ...

  10. Grid++Report 数据填充教程

    用 Grid++Report的报表设计器应用程序设计一个简单的报表:“机房开发收入总汇表”                  一.定义报表头 1.执行菜单命令“插入”→“报表头” 2.执行菜单命令“插 ...