原理代码如下：

　　

<!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. 基础--Redis在Linux环境下的安装

    1. 安装redis服务 1.1 检查安装依赖程序 yum install gcc-c++yum install -y tclyum install wget 1.1.1 下载redis安装包 (或者 ...

  2. Luogu P1690 贪婪的Copy

    题目描述 Copy从卢牛那里听说在一片叫yz的神的领域埋藏着不少宝藏,于是Copy来到了这个被划分为个区域的神地.卢牛告诉了Copy这里共有个宝藏,分别放在第Pi个(1<=Pi<=N)区域 ...

  3. iOS.Animations.by.Tutorials.v2.0汉化（三）

    第2章:Springs 在前一章中,您学习了如何创建UIKit的基本动画,包括如何提供起始值和结束值随着时间的UIKit,自动为你创建一个动画. 到目前为止,你的动画一直是单方向的流体运动.当你激活一 ...

  4. Davinci DM6446 Codec Engine双核通信环境的搭建

    根据前几篇文章,一个DM6446的系统已经架构完成.但是有很多人都喜欢TI的机制,毕竟双核软件开发对很多工程师来说是非常麻烦的事情,既然TI提供开发套件和开发包,那么直接做OEM就可以了,底层的东西不 ...

  5. 10种软件开发中 over-engineering 的错误套路

    别把「不要过度使用 Generic」误解成「不用 Generic」,也别把「不要写一些不必要的 Wrapper」误解成「不写任何 Wrapper」.我只是在讲 over-engineering 这个事 ...

  6. dojo之FilteringSelect

    1.保证可视框宽度与下拉框宽度一致 forceWidth:'true' 2.控制下拉框的高度 maxHeight:'120'

  7. linux下编译sphinx拓展

    编译libsphinxclient sphinx 源码包里的api文件夹下的libsphinxclient cd /root/api/libsphinxclient/ ./configure make ...

  8. JXL组件生成报表报错（二）

    JXL组件生成报表 1.具体报错如下: usage: java org.apache.catalina.startup.Catalina [ -config {pathname} ] [ -nonam ...

  9. JavaScript替换HTML标签

    JavaScript替换HTML标签 1.说明 获取HTML字符串(包含标签),通过正则表达式替换HTML标签,输出替换后的字符串 2.实现JavaScript代码 function deleteTa ...

  10. 决策树系列（四）——C4.5

    预备知识:决策树.ID3 如上一篇文章所述,ID3方法主要有几个缺点:一是采用信息增益进行数据分裂,准确性不如信息增益率:二是不能对连续数据进行处理,只能通过连续数据离散化进行处理:三是没有采用剪枝的 ...