canvas石英钟:demo

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title>石英钟</title>
  6.     <style>.clock {
  7.         text-align: center;
  8.         padding: 20%
  9.     }</style>
  10. </head>
  11. <body>
  12.  
  13. <div class="clock">
  14.     <canvas id="clock"></canvas>
  15. </div>
  16.  
  17. <script type="text/javascript">
  18.     var CLOCK = {
  19.         'ctx': '', //canvas Object
  20.         'ctxw': '',//canvas宽度
  21.         'ctxh': '', // canvas高度
  22.         'r': '', //钟表的半径
  23.         hours: [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2], //时刻
  24.  
  25.         //初始化
  26.         inits: function () {
  27.             var self = this; // 保存this
  28.             self.ctx = document.getElementById('clock').getContext('2d');//方法返回一个用于在画布上绘图的环境
  29.             self.ctxw = self.ctx.canvas.width = 200;//设置width
  30.             self.r = self.ctxw / 2; //获取半径
  31.             self.ctxh = self.ctx.canvas.height = 200;//设置高度
  32.  
  33.             // 周期性定时器 时间走起来
  34.             setInterval(function () {
  35.                 self.timeRunning();
  36.             }, 1000);
  37.         },
  38.  
  39.         //时间函数
  40.         timeRunning: function () {
  41.             var self = this,
  42.                     ctx = self.ctx,
  43.                     ctxw = self.ctxw,
  44.                     ctxh = self.ctxh;
  45.  
  46.             ctx.clearRect(0, 0, ctxw, ctxh); //在给定的矩形内清除指定的像素
  47.             var now = new Date(); //当前时间
  48.             var hour = now.getHours(); //获取时
  49.             var minute = now.getMinutes(); //获取分
  50.             var second = now.getSeconds(); //获取秒
  51.  
  52.             self.clockDial();
  53.             self.clockHours();
  54.  
  55.             self.clockwise(hour, minute);
  56.             self.minuteHand(minute, second);
  57.             self.secondHand(second);
  58.  
  59.             self.circlePoint();
  60.  
  61.             ctx.restore();//返回之前保存过的路径状态和属性
  62.         },
  63.  
  64.         //定义表盘
  65.         clockDial: function () {
  66.             var self = this,
  67.                     ctx = self.ctx,
  68.                     circle = {
  69.                         'lineWidth': 10, //线宽
  70.                         'font': '18px Arial', // 文本样式
  71.                         'textAlign': 'center', // 水平居中
  72.                         'textBaseline': 'middle' //垂直居中
  73.                     };
  74.  
  75.             ctx.beginPath();//定义当前路径
  76.             ctx.lineWidth = circle.lineWidth;
  77.             ctx.font = circle.font;
  78.             ctx.textAlign = circle.textAlign;
  79.             ctx.textBaseline = circle.textBaseline;
  80.  
  81.             //圆的参数
  82.             // arc（x,y,半径,起点，终点，顺时针默认false）
  83.             ctx.arc(self.r, self.r, self.r - 5, 0, 2 * Math.PI, false);
  84.             //绘制已定义的路径
  85.             ctx.stroke();
  86.         },
  87.  
  88.         //定义时刻、每一个刻度和圆心点
  89.         clockHours: function () {
  90.             var self = this,
  91.                     hours = self.hours,
  92.                     r = self.r,
  93.                     ctx = self.ctx,
  94.                     ctxw = self.ctxw,
  95.                     ctxh = self.ctxh,
  96.                     now = new Date(),
  97.                     yymmdd, //年月日
  98.                     mm; //月份
  99.             /*
  100.              * hours.forEach(function (val数组元素, idx元素的索引, arr数组本身) {})
  101.              * 圆上每个点坐标（x,y）:
  102.              * x = r + Math.sin(2*Math.PI / 360) * (r - offset) // offset 偏移量
  103.              * y = r + Math.cos(2*Math.PI / 360) * (r - offset)
  104.              */
  105.  
  106.             //时刻
  107.             hours.forEach(function (val, idx) {
  108.                 var radian = 2 * Math.PI / 12 * idx;
  109.                 var x = r + Math.cos(radian) * (r - 30);
  110.                 var y = r + Math.sin(radian) * (r - 30);
  111.                 ctx.fillStyle = '#000'; //设置或返回用于填充绘画的颜色、渐变或模式
  112.                 ctx.fillText(val, x, y); //在画布上绘制“被填充的”文本
  113.             });
  114.  
  115.             /*
  116.              * 每一个刻度
  117.              */
  118.             for (var i = 0, len = 60; i < len; i++) {
  119.                 var radian = 2 * Math.PI / len * i;
  120.                 var x = r + Math.cos(radian) * (r - 18);
  121.                 var y = r + Math.sin(radian) * (r - 18);
  122.                 ctx.beginPath();
  123.                 if (i % 5 == 0) { //模除于5等于0
  124.                     ctx.arc(x, y, 2, 0, 2 * Math.PI, false);
  125.                     ctx.fillStyle = '#000'
  126.                 } else {
  127.                     ctx.arc(x, y, 2, 0, 2 * Math.PI, false);
  128.                     ctx.fillStyle = '#999'
  129.                 }
  130.                 ctx.fill();//填充当前绘图（路径
  131.             }
  132.  
  133.             //定义日期
  134.             ctx.beginPath();
  135.             ctx.lineWidth = 2;
  136.             ctx.strokeRect(ctxw * 0.3, ctxw * 0.62, ctxw * 0.4, 20); //绘制矩形（无填充）
  137.             ctx.beginPath();
  138.             mm = now.getMonth() + 1;
  139.             mm = mm > 10 ? mm : '0' + mm;
  140.             yymmdd = now.getFullYear() + '-' + mm + '-' + now.getDate();
  141.             ctx.font = '14px Arial';//字体样式
  142.             ctx.fillStyle = '#000';
  143.             ctx.fillText(yymmdd, ctxw / 2, ctxw * 2 / 3);
  144.         },
  145.  
  146.         //定义时针
  147.         clockwise: function (hours, minutes) {
  148.             var self = this,
  149.                     r = self.r,
  150.                     radian,
  151.                     mradian,
  152.                     ctxw = self.ctxw,
  153.                     ctxh = self.ctxh,
  154.                     ctx = self.ctx;
  155.             ctx.save();
  156.             ctx.beginPath();
  157.             radian = 2 * Math.PI / 12 * hours; // 每一个时刻的弧度 * 小时
  158.             mradian = 2 * Math.PI / 12 / 60 * minutes;// 每一分的弧度 * 分数
  159.             ctx.translate(r, r); // translate 改变坐标原点（x,y）.
  160.             ctx.rotate(radian + mradian);
  161.             ctx.lineWidth = 6;
  162.             ctx.moveTo(0, 10);//把路径移动到画布中的指定点，不创建线条
  163.             ctx.lineTo(0, -r / 2.5); //添加一个新点，然后在画布中创建从该点到最后指定点的线条
  164.  
  165.             ctx.stroke();
  166.             ctx.restore();
  167.         },
  168.  
  169.         //定义分针
  170.         minuteHand: function (minutes, seconds) {
  171.             var self = this,
  172.                     r = self.r,
  173.                     radian,
  174.                     sradian,
  175.                     ctxw = self.ctxw,
  176.                     ctxh = self.ctxh,
  177.                     ctx = self.ctx;
  178.             ctx.save();
  179.             ctx.beginPath();
  180.             radian = 2 * Math.PI / 60 * minutes;
  181.             sradian = 2 * Math.PI / 60 / 60 * seconds;// 每一秒的弧度 * 秒数
  182.             ctx.translate(r, r);
  183.             ctx.rotate(radian + sradian);
  184.             ctx.lineWidth = 4;
  185.             ctx.moveTo(0, 15);
  186.             ctx.lineTo(0, -r / 2);
  187.             ctx.stroke();
  188.             ctx.restore();
  189.         },
  190.  
  191.         //定义秒针
  192.         secondHand: function (seconds) {
  193.             var self = this,
  194.                     r = self.r,
  195.                     radian,
  196.                     sradian,
  197.                     ctxw = self.ctxw,
  198.                     ctxh = self.ctxh,
  199.                     ctx = self.ctx;
  200.  
  201.             console.log(seconds);
  202.             ctx.save();
  203.             ctx.beginPath();
  204.             radian = 2 * Math.PI / 60 * seconds;
  205.             ctx.translate(r, r);
  206.             ctx.rotate(radian);
  207.             ctx.lineWidth = 3;
  208.             ctx.lineCap = 'round';
  209.  
  210.             ctx.moveTo(-2, 20);
  211.             ctx.lineTo(2, 20);
  212.             ctx.lineTo(1, -r + 18);
  213.             ctx.lineTo(-1, -r + 18);
  214.             ctx.fillStyle = '#c14543';
  215.             ctx.fill();
  216.  
  217.             ctx.restore();
  218.         },
  219.  
  220.         circlePoint: function () {
  221.             var self = this,
  222.                     r = self.r,
  223.                     ctx = self.ctx;
  224.             //圆心
  225.             ctx.beginPath();
  226.             ctx.arc(r, r, 2, 0, 2 * Math.PI, false);
  227.             ctx.fillStyle = '#FFFFFF';
  228.             ctx.fill();
  229.         }
  230.     };
  231.  
  232.     CLOCK.inits();
  233.  
  234. </script>
  235.  
  236. </body>
  237. </html>

canvas石英钟的更多相关文章

  1. html5 canvas常用api总结(三)--图像变换API

    canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...

  2. 【探索】利用 canvas 实现数据压缩

    前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...

  3. 简单入门canvas - 通过刮奖效果来学习

    一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...

  4. 获取Canvas当前坐标系矩阵

    前言 在我的另一篇博文 Canvas坐标系转换 中,我们知道了所有的平移缩放旋转操作都会影响到画布坐标系.那在我们对画布进行了一系列操作之后,怎么再知道当前矩阵数据状态呢. 具体代码 首先请看下面的一 ...

  5. Canvas坐标系转换

    默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角坐标为x=0,y=0的点称作原点.在默认坐标系中,每一个点的坐标都是直接 ...

  6. Canvas绘图之平移translate、旋转rotate、缩放scale

    画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描 ...

  7. 用html5的canvas和JavaScript创建一个绘图程序

    本文将引导你使用canvas和JavaScript创建一个简单的绘图程序. 创建canvas元素 首先准备容器Canvas元素,接下来所有的事情都会在JavaScript里面. <canvas ...

  8. html5标签canvas函数drawImage使用方法

    html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...

  9. 使用 JavaScript 和 canvas 做精确的像素碰撞检测

    原文地址:Pixel accurate collision detection with Javascript and Canvas 译者:nzbin 我正在开发一个需要再次使用碰撞检测的游戏.我通常 ...

随机推荐

  1. jq选项卡切换功能

    效果图: <!DOCTYPE html> <html lang="en"> <head> <style> *{margin:0;pa ...

  2. python初探爬虫

    python爬虫初探 爬取前50名豆瓣电影: 废话少说,直接上代码! import re​import requestsfrom bs4 import BeautifulSoup​def get_co ...

  3. 使用R语言 SDK调取tushare数据

    安装Tushare 打开RStudio,在控制台输入命令: > install.packages('Tushare') Tushare的R包需要依赖httr.tidyverse.forecast ...

  4. 22-Ubuntu-文件和目录命令-移动文件和目录-mv

    mv 可以用来移动文件或目录,也可以给文件或目录重命名. 选项 含义 -i 覆盖文件前提示 1.移动文件和目录 1-1移动文件 例: 将当前目录下的123.txt文件移动到~/桌面/b/e目录下 mv ...

  5. NPE问题

    “防止 NPE,是程序员的基本修养.”NPE(Null Pointer Exception) 参考: https://www.jianshu.com/p/9915f2e34a13

  6. linux 下使用scp命令传输文件

    scp -P 1234 /home/wakasann/test.txt wakasann@192.168.1.30:/var/www/html/ 使用 1234端口,将 test.txt文件传输到服务 ...

  7. [JZOJ6340] 【NOIP2019模拟2019.9.4】B

    题目 题目大意 给你个非负整数数列\(a\),每次等概率选择大于零的\(a_i\),使其减\(1\). 问\(a_1\)被减到\(0\)的时候期望经过多少次操作. 思考历程 对于这题的暴力做法,显然可 ...

  8. JPA 基本使用

    ORM简介 对象关系映射(Object Relational Mapping,简称ORM),是一种程序技术,用于实现面向对象编程语言里不同类型系统的数据之间的转换. 实现ORM思想的框架:Mybati ...

  9. Windows ping

    用法: ping [-t] [-a] [-n count] [-l size] [-f] [-i TTL] [-v TOS]            [-r count] [-s count] [[-j ...

  10. 单层感知机_线性神经网络_BP神经网络

    单层感知机 单层感知机基础总结很详细的博客 关于单层感知机的视频 最终y=t,说明经过训练预测值和真实值一致.下面图是sign函数 根据感知机规则实现的上述题目的代码 import numpy as ...