原理代码如下：

　　

<!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. Flask從入門到入土(四)——登錄實現

    表單介紹 1.表單標籤 聲明表單的範圍,位於表單標籤中的元素將被提交 語法: <form>  </form> 屬性: Method(提交方式get,post) , Enctyp ...

  2. 3道acm简单题（2011）：1.判断是否能组成三角形；2.判断打鱼还是晒网；3.判断丑数。

    //1.输入三个正整数A.B.C,判断这三个数能不能构成一个三角形.//思路:最小的两边之和是否是大于第三边#include<iostream>#include<algorithm& ...

  3. uva1343 IDA*

    这题需要用数组记录每个block的位置.启发函数:d+wa(8-当前最多相同个数)>maxd直接退出 AC代码: #include<cstdio> #include<cstri ...

  4. 【BZOJ1834】 网络扩容

    Time Limit: 1000 ms   Memory Limit: 128 MB Description 给定一张有向图,每条边都有一个容量C和一个扩容费用W.这里扩容费用是指将容量扩大1所需的费 ...

  5. Python基于Flask框架配置依赖包信息的项目迁移部署小技巧

    一般在本机上完成基于Flask框架的代码编写后,如果有接口或者数据操作方面需求需要把代码部署到指定服务器上. 一般情况下,使用Flask框架开发者大多数都是选择Python虚拟环境来运行项目,不同的虚 ...

  6. python 小练习之生成手机号码

    需求分析: 1 将固定的号码段放到list中 如:136 137 180 183等等 2 随机取8个数字元素 3 将固定号码段与随机产生的元素拼接在一起 4 写入文件 import stringdef ...

  7. zTree实现删除树子节点

    zTree实现删除树子节点 1.实现源码 <!DOCTYPE html> <html> <head> <title>zTree实现基本树</tit ...

  8. org.apache.jasper.JasperException: /pages/column.jsp (line: 8, column: 1) File "pathTags.jsp" not f

    1.错误描述 21-Mar-2015 00:57:40.934 INFO [localhost-startStop-2] org.apache.catalina.core.ApplicationCon ...

  9. Flex下拉框

    <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...

  10. gplots heatmap.2和ggplot2 geom_tile实现数据聚类和热图plot

    主要步骤 ggplot2 数据处理成矩阵形式,给行名列名 hclust聚类,改变矩阵行列顺序为聚类后的顺序 melt数据,处理成ggplot2能够直接处理的数据结构,并加上列名 ggplot_tile ...