1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Canvas</title>
  6.     <script type="text/javascript" src="jQuery.js"></script>
  7. </head>
  8. <style type="text/css">
  9.     body {
  10.         padding: 0;
  11.         margin: 0;
  12.         background: black;
  13.     }
  14.     #canvas {
  15.         background: white;
  16.         margin: 100px 0 0 300px;
  17.     }
  18.     #canvas>span {
  19.         color: white;
  20.         font-size: 14px;
  21.     }
  22. </style>
  23. <body>
  24.     <canvas id="canvas" width="600" height="500">
  25.     <span>您的浏览器不支持</span>
  26. </canvas>
  27. </body>
  28. </html>
  29. <script type="text/javascript">
  30.     /*获取绘制环境*/
  31.     var oc = $('#canvas')[0];
  32.     canvas = oc.getContext('2d');
  33.     /*定义圆心和半径*/
  34.     var x = 250, y = 250, r = 150;
  36.     var time = setInterval(function() {
  37.         ClocksWatche();
  38.     }, 1000);
  40.     function ClocksWatche() {
  41.         /*清理画布*/
  42.         canvas.clearRect(0, 0, oc.width, oc.height);
  43.         /*开始绘制*/
  44.         canvas.beginPath();
  45.         for(var i = 0; i < 60; i++) {
  46.             /*绘制起始点移到圆心*/
  47.             canvas.moveTo(x, y);
  48.             /*根据圆心和半径每6度绘制一次(圆心横坐标,圆心纵坐标,其实弧度,结束弧度,是否逆时针)*/
  49.             canvas.arc(x, y, r, 6 * i * Math.PI / 180, 6 * (i + 1) * Math.PI / 180, false);
  50.         }
  51.         /*连接至起始点*/
  52.         canvas.closePath();
  53.         /*画线*/
  54.         canvas.stroke();
  55.         /*设置线的粗细*/
  56.         canvas.lineWidth = 3;
  57.         /*开始绘制*/
  58.         canvas.beginPath();
  59.         for(var i = 0; i < 60; i++) {
  60.             /*绘制起始点移到圆心*/
  61.             canvas.moveTo(x, y);
  62.             /*根据圆心和半径没30度绘制一次*/
  63.             canvas.arc(x, y, r, 30 * i * Math.PI / 180, 30 * (i + 1) * Math.PI / 180, false);
  64.         }
  65.         /*连接至起始点*/
  66.         canvas.closePath();
  67.         /*画线*/
  68.         canvas.stroke();
  69.         /*设置填充颜色*/
  70.         canvas.fillStyle = 'white';
  71.         canvas.beginPath();
  72.         canvas.moveTo(x, y);
  73.         canvas.arc(x, y, r * 14 / 15, 0, 360, false);
  74.         canvas.closePath();
  75.         canvas.fill();
  77.         var loacalDate = new Date();
  78.         var hours = loacalDate.getHours();
  79.         var minute = loacalDate.getMinutes();
  80.         var sencond = loacalDate.getSeconds();
  81.         hours = (hours * 30 - 90 + minute / 2) * Math.PI / 180;
  82.         minute = (minute * 6 - 90) * Math.PI / 180;
  83.         sencond = (sencond * 6 - 90) * Math.PI / 180;
  85.         canvas.beginPath();
  86.         canvas.lineWidth = 5;
  87.         canvas.moveTo(x, y);
  88.         canvas.arc(x, y, r * 8 / 15, hours, hours, false);
  89.         canvas.stroke();
  91.         canvas.beginPath();
  92.         canvas.lineWidth = 3;
  93.         canvas.moveTo(x, y);
  94.         canvas.arc(x, y, r * 10 / 15, minute, minute, false);
  95.         canvas.stroke();
  97.         canvas.beginPath();
  98.         canvas.lineWidth = 1;
  99.         canvas.moveTo(x, y);
  100.         canvas.arc(x, y, r * 14 / 15, sencond, sencond, false);
  101.         canvas.stroke();
  102.     }
  103. </script>

HTML5 Canvas 小例子 旋转的时钟的更多相关文章

  1. HTML5 Canvas 小例子 旋转的图片

    <一>CSS部分 @charset "utf-8"; *{ padding:; margin:; outline: none; } #canvas{ position: ...

  2. HTML5 Canvas 小例子 伸缩旋转方块

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. HTML5 Canvas 小例子 简易画板

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 如何开发一个简单的HTML5 Canvas 小游戏

    原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...

  5. HTML5 Canvas小游戏基础：用户交互

    交互是游戏的根本.缺少了用户交互,游戏就不能称之为游戏,只能说是动画或电影.事件是浏览器响应用户交互操作的一种机制. 1．事件和事件执行 事件定义了用户与页面交互时产生的各种操作(主要通过鼠标或热键的 ...

  6. html5 canvas围绕中心点旋转

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. html5 canvas防微博旋转

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. WPF Canvas小例子

    源码下载:DraggingElementsInCanvas_demo.rar

  9. html5 canvas绘画时钟

    本示例使用HTML5 canvas,模拟显示了一个时钟, 请使用支持HTML5的浏览器预览效果: HTML部分: <!DOCTYPE html> <html lang="e ...

随机推荐

  1. Java第04次实验提纲（面向对象2-继承、多态、抽象类与接口）

    PTA 题集面向对象2-进阶-多态接口内部类 第1次实验 1.1 题集5-1(Comparable) 难点:如果传入对象为null,或者传入对象的某个属性为null,怎么处理? 1.2 题集5-2(C ...

  2. LaTeX安装和配置

    1. 下载安装MikTeX(发行版).WinEdt(编辑器): (MikTex自带编辑器,不过太简陋了.另一个可选编辑器是TexStudio.) 2. 打开MikTeX Package Manager ...

  3. HTTP是什么？，GET与POST区别？

    HTTP是什么? 超文本传输协议(HTTP),目的是保证客户端与服务器之间的通信. 工作方式是客户端与服务器之间的请求-应答协议. web浏览器可能是客户端,计算机上的网络应用程序也可能作为服务器端. ...

  4. Memcached在.NET应用程序中的使用

    在应用程序运行的过程中总会有一些经常需要访问并且变化不频繁的数据,如果每次获取这些数据都需要从数据库或者外部文件系统中去读取,性能肯定会受 到影响,所以通常的做法就是将这部分数据缓存起来,只要数据没有 ...

  5. 学习笔记之GenFu

    Everybody was GenFu Fighting - GenFu http://genfu.io/ GenFu is a test and prototype data generation ...

  6. Jmeter（三十三）Stepping Thread Group

    碰巧最近在做性能测试,就记一下Jmeter的第三方插件Stepping Thread Group. 具体一些插件信息,可以去:jmeter-plugins.org去进行下载. 该插件目前是已经被弃用的 ...

  7. [UE4]一个好用的虚幻4插件，根据资源名称动态加载资源,GetCurrentLeveName（获得当前地图名称）

    下载地址 一.下载与UE4相对应的版本 二.在工程根目录新建Plugins目录,解压插件. 三.如果工程已经打开,则需要重新打开   四.重新打开工程后,右下角会有提示有新插件可用. 五.这个插件提供 ...

  8. [UE4]RetainerBox，控制UI更新频率，把渲染后的UI当成Texture

    RetainerBox是一个容器,只会影响其容器内的UI,RetainerBox的作用: 一.控制UI更新频率(可能是为有优化性能) 1.在UserWidget中添加Retainer Box容器,并在 ...

  9. Xmanager远程连接CentOS7

    上周例会,又被说了一通,Xmanager远程连接的文档没写?服务没搭建?心想这都有VNC了,为毛一定要弄这个啊?!!但是,我还是在今天给弄了,╮(╯▽╰)╭没人权.搭建完尝试用了下,感觉吧,也不咋地啊 ...

  10. 第10章 网络安全（3）_安全套接字层SSL

    4. 安全套接字层 4.1 安全套接字层(SSL)和传输层安全(TLS) (1)SSL/TLS提供的安全服务 ①SSL服务器鉴别,允许用户证实服务器的身份.支持SSL的客户端通过验证来自服务器的证书, ...