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接收get传递的值的代码
Nov 30 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
Feb 27 Javascript
JS Map 和 List 的简单实现代码
Jul 08 Javascript
ExtJS4 动态生成的grid导出为excel示例
May 02 Javascript
浅谈jquery点击label触发2次的问题
Jun 12 Javascript
Bootstrap显示与隐藏简单实现代码
Mar 06 Javascript
基于Swiper实现移动端页面图片轮播效果
Dec 28 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
Jan 18 Javascript
vue渲染方式render和template的区别
Jun 05 Javascript
vuex分模块后,实现获取state的值
Jul 26 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
Dec 04 Javascript
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
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下检测字符串是否是utf8编码的代码
2008/06/28 PHP
PHP日期时间函数的高级应用技巧
2009/05/16 PHP
ThinkPHP权限认证Auth实例详解
2014/07/22 PHP
PHP加密技术的简单实现
2016/09/04 PHP
PHP实现电商订单自动确认收货redis队列
2017/05/17 PHP
js 事件小结 表格区别
2007/08/13 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
2012/12/23 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
2013/05/21 Javascript
验证手机号码的JS方法分享
2013/09/10 Javascript
js css 实现遮罩层覆盖其他页面元素附图
2014/09/22 Javascript
浅谈JS闭包中的循环绑定处理程序
2014/11/09 Javascript
js Calender控件使用详解
2015/01/05 Javascript
js与jquery回车提交的方法
2015/02/03 Javascript
Angular 应用技巧总结
2016/09/14 Javascript
javascript 动态脚本添加的简单方法
2016/10/11 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
2019/01/15 Javascript
Vue实现图书管理小案例
2020/12/03 Vue.js
python实现微信每日一句自动发送给喜欢的人
2019/04/29 Python
python解释器安装教程的方法步骤
2020/07/02 Python
基于Pytorch版yolov5的滑块验证码破解思路详解
2021/02/25 Python
CSS3 开发工具收集
2010/04/17 HTML / CSS
使用HTML5拍照示例代码
2013/08/06 HTML / CSS
全球领先的鞋类零售商:The Walking Company
2016/07/21 全球购物
亚洲最大旅游体验平台:KKday
2017/10/21 全球购物
MYPROTEIN澳大利亚官方网站:欧洲运动营养品牌
2019/06/26 全球购物
世界上最好的野生海鲜和有机食品:Vital Choice
2020/01/16 全球购物
自我评价范文分享
2014/01/04 职场文书
经济信息系毕业生自荐信范文
2014/03/15 职场文书
警校毕业生自我评价
2014/04/06 职场文书
技术负责人任命书
2014/06/05 职场文书
授权委托书怎么写
2014/09/25 职场文书
三行辞职书范文
2015/02/26 职场文书
话题作文之财富(600字)
2019/12/03 职场文书
Django使用channels + websocket打造在线聊天室
2021/05/20 Python
MySQL中VARCHAR与CHAR格式数据的区别
2021/05/26 MySQL