js Canvas绘制圆形时钟效果


Posted in Javascript onFebruary 17, 2017

本文实例为大家分享了js Canvas圆形时钟的具体实现代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Canvas Clock</title>
    <style type="text/css">

      div{
        text-align: center;
        margin-top: 250px;
      }
      #clock{

        border: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <div>
      <canvas id="clock" height="200px" width="200px"></canvas>
    </div>

    <script type="text/javascript" src="js/clock.js"></script>
  </body>
</html>

js

var dom=document.getElementById('clock');
var cxt=dom.getContext("2d");
var width=cxt.canvas.width;
var height=cxt.canvas.height;
var r=width/2;

function drawBackground(){
  cxt.save();
  cxt.translate(r,r);
  cxt.beginPath();
  cxt.lineWidth=10;
  cxt.arc(0,0,r-5,0,2*Math.PI,false);
  cxt.stroke();
  cxt.font="18px Arial";
  cxt.textAlign='center'
  cxt.textBaseline='middle'
  var hourNums=[3,4,5,6,7,8,9,10,11,12,1,2];
  hourNums.forEach(function(number,i){

    var rad=2*Math.PI/12*i;
    var x=Math.cos(rad)*(r-30);
    var y=Math.sin(rad)*(r-30);
    cxt.fillText(number,x,y);

  });

  for(var i=0;i<60;i++){

    var rad=2*Math.PI/60*i;
    var x=Math.cos(rad)*(r-18);
    var y=Math.sin(rad)*(r-18);
    cxt.beginPath();
    if(i % 5===0){
      cxt.fillStyle="#000"
      cxt.arc(x,y,2,0,2*Math.PI,false);
    }
    else{
      cxt.fillStyle="#ccc"
      cxt.arc(x,y,2,0,2*Math.PI,false);
    }
    cxt.fill(); 
  }

}

function drawHour(hour,minute){
  cxt.save();
  cxt.beginPath();
  var rad=2*Math.PI/12*hour;
  var mrad=2*Math.PI/12/60*minute
  cxt.rotate(rad+mrad);
  cxt.lineWidth=6;
  cxt.lineCap='round'
  cxt.moveTo(0,10);
  cxt.lineTo(0,-r/2);
  cxt.stroke();
  cxt.restore();
}

function drawMinute(minute){
  cxt.save();
  cxt.beginPath();
  var rad=2*Math.PI/60*minute;
  cxt.rotate(rad);
  cxt.lineWidth=3;
  cxt.lineCap='round'
  cxt.moveTo(0,10);
  cxt.lineTo(0,-r+30);
  cxt.stroke();
  cxt.restore();
}

function drawSecond(second){
  cxt.save();
  cxt.beginPath();
  cxt.fillStyle='#c14543'
  var rad=2*Math.PI/60*second;
  cxt.rotate(rad);  
  cxt.moveTo(-2,20);
  cxt.lineTo(2,20);
  cxt.lineTo(1,-r+18);
  cxt.lineTo(-1,-r+18);
  cxt.fill();
  cxt.restore();
}

function drawDot(){

  cxt.beginPath();
  cxt.fillStyle='#fff'
  cxt.arc(0,0,3,0,2*Math.PI,false);
  cxt.fill();
}

function draw(){

  cxt.clearRect(0,0,width,height);
  var now=new Date();
  var hour=now.getHours();
  var minute=now.getMinutes();
  var second=now.getSeconds();
  drawBackground();
  drawHour(hour,minute);
  drawMinute(minute);
  drawSecond(second);
  drawDot();
  cxt.restore();
}
draw();
setInterval(draw,1000);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中的Window窗口对象
Jan 16 Javascript
js CSS操作方法集合
Oct 31 Javascript
JQuery 入门实例1
Jun 25 Javascript
jQuery实战之品牌展示列表效果
Apr 10 Javascript
jQuery $.each遍历对象、数组用法实例
Apr 16 Javascript
比较常见的javascript中定义函数的区别
Nov 09 Javascript
js过滤HTML标签完整实例
Nov 26 Javascript
Js的Array数组对象详解
Feb 22 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
May 11 Javascript
vue router2.0二级路由的简单使用
Jul 05 Javascript
mpvue 单文件页面配置详解
Dec 02 Javascript
Vue项目服务器部署之子目录部署方法
May 12 Javascript
Bootstrap风格的zTree右键菜单
Feb 17 #Javascript
js仿新浪微博消息发布功能
Feb 17 #Javascript
babel基本使用详解
Feb 17 #Javascript
JS及JQuery对Html内容编码,Html转义
Feb 17 #Javascript
canvas 实现中国象棋
Feb 17 #Javascript
使用vue.js实现checkbox的全选和多个的删除功能
Feb 17 #Javascript
js实现横向拖拽导航条功能
Feb 17 #Javascript
You might like
PHP&amp;MYSQL服务器配置说明
2006/10/09 PHP
php抽奖概率算法(刮刮卡,大转盘)
2020/04/17 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
php 数据结构之链表队列
2017/10/17 PHP
动态加载js的几种方法
2006/10/23 Javascript
javascript类继承机制的原理分析
2009/09/12 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
2015/03/13 Javascript
js实现的四级左侧网站分类菜单实例
2015/05/06 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
2016/05/21 Javascript
js数字计算 误差问题的快速解决方法
2017/02/28 Javascript
JS对象创建的几种方式整理
2017/02/28 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
2018/04/17 jQuery
javascript深拷贝、浅拷贝和循环引用深入理解
2018/05/27 Javascript
jQuery实现的点击图片居中放大缩小功能示例
2019/01/16 jQuery
小程序点击图片实现png转jpg
2019/10/22 Javascript
node+vue实现文件上传功能
2020/05/28 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
2020/11/04 Javascript
Python中的深拷贝和浅拷贝详解
2015/06/03 Python
Python中MySQLdb和torndb模块对MySQL的断连问题处理
2015/11/09 Python
Python程序中的观察者模式结构编写示例
2016/05/27 Python
Python的几个高级语法概念浅析(lambda表达式闭包装饰器)
2016/05/28 Python
浅谈Python的文件类型
2016/05/30 Python
Python中selenium实现文件上传所有方法整理总结
2017/04/01 Python
python WindowsError的错误代码详解
2017/07/23 Python
Python使用到第三方库PyMuPDF图片与pdf相互转换
2019/05/03 Python
python输出电脑上所有的串口名的方法
2019/07/02 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
python中的Elasticsearch操作汇总
2019/10/30 Python
python itsdangerous模块的具体使用方法
2020/02/17 Python
Python自动登录QQ的实现示例
2020/08/28 Python
python中字符串的编码与解码详析
2020/12/03 Python
HealthElement海外旗舰店:新西兰大卖场
2018/02/23 全球购物
什么是触发器(trigger)? 触发器有什么作用?
2013/09/18 面试题
委托书如何写
2014/08/30 职场文书
员工培训协议书
2014/09/15 职场文书
python3中apply函数和lambda函数的使用详解
2022/02/28 Python