1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <canvas id="myCanvas" width="" height=""
  9.     style="border:1px solid #000000;">您的浏览器不支持canvas
  10. </canvas>
  11. <script type="text/javascript">
  12.     var c =document.querySelector('#myCanvas');
  13.     // 标识画布并指明上下文
  14.     var ctx = c.getContext('2d');
  15.  
  16.     // 1.表盘
  17.     ctx.lineWidth = ;
  18.     ctx.stroeStyle = '#000';
  19.     ctx.beginPath();
  20.     ctx.arc(,,,,,false);
  21.     ctx.stroke()
  22.     ctx.closePath()
  23.     // 刻度
  24.         //     时刻度
  25.         for (var i = ; i < ; i++) {
  26.             ctx.save();
  27.             ctx.lineWidth= ;
  28.             ctx.strokeStyle = 'orange';
  29.                 // 设置0,0点位置
  30.                 ctx.translate(,);
  31.                 // 设置旋转角度
  32.                 ctx.rotate(i**Math.PI/);
  33.  
  34.                 ctx.beginPath();
  35.                 ctx.moveTo(,);
  36.                 ctx.lineTo(,);
  37.                 ctx.stroke();
  38.                 ctx.closePath();
  39.                 ctx.restore()
  40.             }
  41.         // 分刻度
  42.         for (var i = ; i < ; i++) {
  43.             ctx.save();
  44.             ctx.lineWidth= 4.5;
  45.             ctx.strokeStyle = 'orange';
  46.                 // 设置0,0点位置
  47.                 ctx.translate(,);
  48.                 // 设置旋转角度
  49.                 ctx.rotate(i**Math.PI/);
  50.  
  51.                 ctx.beginPath();
  52.                 ctx.moveTo(,);
  53.                 ctx.lineTo(,);
  54.                 ctx.stroke();
  55.                 ctx.closePath();
  56.                 ctx.restore()
  57.             }
  58.         // 时针
  59.         ctx.save();
  60.         ctx.lineWidth=;
  61.         ctx.strokeStyle="#000";
  62.         ctx.translate(,);
  63.         ctx.rotate(*Math.PI/);
  64.         ctx.beginPath();
  65.         ctx.moveTo(,);
  66.         ctx.lineTo(,-);
  67.         ctx.stroke();
  68.         ctx.closePath();
  69.         ctx.restore();
  70.  
  71.         // 分针
  72.         ctx.save();
  73.         ctx.lineWidth=;
  74.         ctx.strokeStyle="#000";
  75.         ctx.translate(,);
  76.         ctx.rotate(*Math.PI/);
  77.         ctx.beginPath();
  78.         ctx.moveTo(,);
  79.         ctx.lineTo(,-);
  80.         ctx.stroke();
  81.         ctx.closePath();
  82.         ctx.restore();
  83.  
  84.         // 秒针
  85.         ctx.save();
  86.         ctx.lineWidth=;
  87.         ctx.strokeStyle="#000";
  88.         ctx.translate(,);
  89.         ctx.rotate(*Math.PI/);
  90.         ctx.beginPath();
  91.         ctx.moveTo(,);
  92.         ctx.lineTo(,-);
  93.         ctx.stroke();
  94.         ctx.closePath();
  95.         ctx.restore();
  96.  
  97.         // 表盘中心
  98.         ctx.lineWidth=;
  99.         ctx.storeStyle='red';
  100.         ctx.beginPath();
  101.         ctx.arc(,,3.5,,,false);
  102.         ctx.stroke();
  103.         ctx.fillStyle = 'white';
  104.         ctx.fill();
  105.         ctx.closePath();
  106.  
  107.         // 设置时针，秒针前面的小圆点
  108.         ctx.translate(,);
  109.         ctx.beginPath();
  110.         ctx.arc(,,,,,false);
  111.         ctx.stroke();
  112.         ctx.fillStyle="white";
  113.         ctx.fill();
  114.         ctx.closePath()
  115.  
  116.     </script>
  117.  
  118. </body>
  119. </html>

用canvas画一个时钟的更多相关文章

  1. 深夜，用canvas画一个时钟

    深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...

  2. 玩转html5（四）----使用canvas画一个时钟（可以动的哦！）

    先给个效果图,我画的比较丑,大家可以自己美化一下, 直接上代码: <!DOCTYPE html> <meta charset="utf-8"> <ht ...

  3. canvas画一个时钟

    效果图如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  4. 10分钟，利用canvas画一个小的loading界面

    首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" styl ...

  5. 用Canvas画一个刮刮乐

    Canvas 通过 JavaScript 来绘制 2D图形.Canvas 是逐像素进行渲染的.开发者可以通过javascript脚本实现任意绘图.Canvas元素是HTML5的一部分,允许脚本语言动态 ...

  6. 利用canvas画一个实时时钟

    先放一张效果图: 下面是源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  7. 用canvas绘制一个时钟

    实现一个时钟的绘制和时间的显示 一,首先是页面的搭建html部分以及一点点的css代码,因为css这块用的比较少,所以就没有单独出来: <!DOCTYPE html> <html l ...

  8. 通过H5的新标签canvas做出一个时钟的全过程，希望对初学者有帮助

    最近学习了H5中的一个新标签canvas并且用它做出了一个时钟,最下面是成品图像,还不错吧,这只是我学习中的一个小demo,做得有点粗糙,但终究是做出来了,以后再写自己的网页主页再做一个好看点放上去. ...

  9. html5入门：教你用canvas写一个时钟

    今天的时间比较充裕,心血来潮,为大家分享一个html5的小例子,希望对刚学html5或者是没学html5正准备学的“童鞋们”展示一个小案例,希望对你们的学习有帮助!高手嘛!请跳过吧! 好了,闲话少数, ...

随机推荐

  1. docker redis使用

    启动方式一:docker默认启动redis 1.拉取镜像 docker pull redis:lastest (若不使用版本号,如docker pull redis,默认拉取最新镜像) 2.启动red ...

  2. JS基础语法---arguments对象伪数组

    引入: //计算两个数字的和 function f1(x, y) { return x + y; } //计算三个数字的和 function f2(x, y, z) { return x + y + ...

  3. Cobalt Strike系列教程第二章：Beacon详解

    上周更新了Cobalt Strike系列教程第一章:简介与安装,文章发布后,深受大家的喜爱,遂将该系列教程的其他章节与大家分享,提升更多实用技能! 第二章:Beacon详解 一.Beacon命令 大家 ...

  4. ActiveMQ持久化到MySQL以及使用SSL协议通讯

    最近公司事情稍微少了点,研究下怎么优化几个系统的交互,因为我们目前使用的是长链接的同步接口,就考虑用下MQ来处理下.由于公司对安全有要求且和CA业务有关,则使用了SSL协议.此文使用的是Activem ...

  5. Python比较配置文件

    工作中最常见的配置文件有四种:普通key=value的配置文件.Json格式的配置文件.HTML格式的配置文件以及YAML配置文件. 这其中以第一种居多,后三种在成熟的开源产品中较为常见,本文只针对第 ...

  6. Docker系列01-容器初探

    关于容器的发展史 关于容器有不得不说的历史故事,以下资料来自于互联网收集整理所得: 容器概念始于 1979 年提出的 UNIX chroot,它是一个 UNIX 操作系统的系统调用,将一个进程及其子进 ...

  7. Docker容器数据卷介绍和命令

    是什么 一句话:有点类似我们Redis里面的rdb和aof文件 先来看看Docker的理念: *  将运用与运行的环境打包形成容器运行 ,运行可以伴随着容器,但是我们对数据的要求希望是持久化的 *   ...

  8. Putty 连接centOS7 超时问题

    方法1: #vim /etc/ssh/sshd_config(添加或修改以下配置) ClientAliveInterval 60(每隔60秒给SSH客户端发送一次信号)   ClientAliveCo ...

  9. Mybatis的动态sql以及分页

    mybatis动态sql If.trim.foreach <select id="selectBooksIn" resultType="com.jt.model.B ...

  10. 对比keep-alive路由缓存设置的2种方式

    方式有两种 .路由元信息(2.1.0版本之前) .属性方式(2.1.0版本之后新增) Vue2.1.0之前: 想实现类似的操作,你可以: 配置一下路由元信息 创建两个keep-alive标签 使用v- ...