原理代码如下：

　　

<!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. 用一个简单的例子比较SVM，MARS以及BRUTO（R语言）

    背景重述 本文是ESL: 12.3 支持向量机和核中表12.2的重现过程.具体问题如下: 在两个类别中产生100个观测值.第一类有4个标准正态独立特征\(X_1,X_2,X_3,X_4\).第二类也有 ...

  2. GB 标准

    std::map<int, std::string> GB2261 = { { 0,"未知的性别" }, { 1,"男性" }, { 2," ...

  3. Ubuntu版本更替所引发的“血案”

    Ubuntu版本更替所引发的"血案"       今天,我兴致很高的装了双系统,并且配置了Linux的网络,接下来就是安装一些软件,来实现我想达到的功能了,结果被一个小小的命令卡的 ...

  4. java注解之二

    从JDK5开始,Java增加了Annotation(注解),Annotation是代码里的特殊标记,这些标记可以在编译.类加载.运行时被读取,并执行相应的处理.通过使用Annotation,开发人员可 ...

  5. dojo中的xhrPost请求（JSON）

    dojo中的xhrPost请求 dojo.xhrPost({ url:"../area.action", content:{ areaCode:areaCode }, handle ...

  6. hi3531的h264压缩中修改波特率

    typedef struct hiVENC_ATTR_H264_CBR_S { HI_U32 u32Gop; HI_U32 u32StatTime; HI_U32 u32ViFrmRate; HI_F ...

  7. Java中的List转换成JSON报错（二）

    1.错误描述 Exception in thread "main" java.lang.NoClassDefFoundError: org/apache/commons/loggi ...

  8. Filter的注册2

    既然Filter是一种COM组件,使用前就必须先注册.Filter的注册程序为regsvr32．exe (位于操作系统目录的system32子目录下).假设现在有一个Filter文件,它的完整路径为C ...

  9. tar、scp、sftp、rsync简单使用

    tar -c 创建一个归档文件 -z 指定压缩格式为gzip -v 显示详细信息 -f 制定文件明 -j 指定压缩格式为bz2 -J 指定压缩格式为 xz -C 压缩.解压至某个目录 -x 自动识别压 ...

  10. T470p VS 2017 上运行 VS 2015 + Qt 5.6.2 + GLSL 400

    vs 2017 的qt设置可以按照这篇文章 注意,必须使用qt的安装程序进行安装,否则会出现意想不到的问题(不要简单地把qt的文件拷贝过来..血的教训) 显卡的问题 好不容易编译通过了,一运行报了一个 ...