canvas 绘制圆形时钟


Posted in Javascript onFebruary 22, 2017

效果如下:

canvas 绘制圆形时钟

代码如下:

<!DOCTYPE html>
<html>
 <head>
 <meta name="viewport" content="width=device-width,initial-scale=1"/>
 <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">
 var dom=document.getElementById("clock");
   var ctx=dom.getContext("2d");
var width=ctx.canvas.width;
var heigth=ctx.canvas.height;
var r=width/2;
//描绘时分秒小数和小数点
function drawBackground(){
 ctx.save();
 ctx.translate(r,r); //中心原点位置
 ctx.beginPath(); //起始位置
 ctx.lineWidth=10;
 //圆
 ctx.arc(0,0,r-5,0,2*Math.PI,false);
 ctx.stroke();
 var hourNumbers=[3,4,5,6,7,8,9,10,11,12,1,2];
 ctx.font="18px Arial";
 ctx.textAlign="center";
 ctx.textBaseline="middle";
 hourNumbers.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);
 ctx.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);
 ctx.beginPath();
 if(i%5===0){
 ctx.fillStyle="#000";
 ctx.arc(x,y,2,2*Math.PI,false);
 }else{
 ctx.fillStyle="#ccc";
 ctx.arc(x,y,2,2*Math.PI,false);
 }
 ctx.fill();
 }
}
//描绘时针
function drawHour(hour,minute){
 ctx.save();
 ctx.beginPath();
 var rad=2*Math.PI / 12 * hour;
 var mrad=2*Math.PI / 12 / 60 * minute;
 ctx.rotate(rad + mrad);
 ctx.lineWidth=6;
 ctx.lineCap="round";
 ctx.moveTo(0,10);
 ctx.lineTo(0,-r/2);
 ctx.stroke();
 ctx.restore();
}
//描绘分针
function drawMinute(minute){
 ctx.save();
 ctx.beginPath();
 var rad=2*Math.PI/60*minute;
 ctx.rotate(rad); 
 ctx.lineWidth=3;
 ctx.lineCap="round";
 ctx.moveTo(0,10);
 ctx.lineTo(0,-r+30);
 ctx.stroke();
 ctx.restore();
}
//描绘秒针
function drawSecond(second){
 ctx.save();
 ctx.beginPath();
 ctx.fillStyle="#C14543";
 var rad=2*Math.PI/60*second;
 ctx.rotate(rad);
 ctx.moveTo(-2,20);
 ctx.lineTo(2,20);
 ctx.lineTo(1,-r+18);
 ctx.lineTo(-1,-r+18)
 ctx.fill();
 ctx.restore(); 
}
//中间固定园点
function drawDot(){
 ctx.beginPath();
 ctx.fillStyle="#fff";
 ctx.arc(0,0,3,0,2*Math.PI,false);
 ctx.fill();
}
function draw(){
 ctx.clearRect(0,0,width,heigth);
 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();
 ctx.restore();
}
draw();
setInterval(draw,1000)
 </script>
 </body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript判断单选框或复选框是否选中方法集锦
Apr 04 Javascript
网页禁用右键实现代码(JavaScript代码)
Oct 29 Javascript
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
Jul 24 Javascript
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
Mar 28 Javascript
这些年、我收集的JQuery代码小结
Aug 01 Javascript
jQuery中 prop() attr()使用详解
May 19 Javascript
javascript实现简单的可随机变色网页计算器示例
Dec 30 Javascript
Vue.js事件处理器与表单控件绑定详解
Mar 20 Javascript
详解用函数式编程对JavaScript进行断舍离
Sep 18 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
Sep 26 Javascript
js+html获取系统当前时间
Nov 10 Javascript
小程序ios音频播放没声音问题的解决
Jul 11 Javascript
jquery实现数字输入框
Feb 22 #Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
Feb 22 #Javascript
js实现无缝滚动图(可控制当前滚动的方向)
Feb 22 #Javascript
vuejs2.0实现一个简单的分页示例
Feb 22 #Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
Feb 22 #Javascript
js实现无缝滚动图
Feb 22 #Javascript
JavaScript实现二分查找实例代码
Feb 22 #Javascript
You might like
分享PHP入门的学习方法
2007/01/02 PHP
在服务端进行目录建立、删除,文件上传、删除的过程的php代码
2008/09/10 PHP
php创建、获取cookie及基础要点分析
2015/01/26 PHP
10款PHP开源商城系统汇总介绍
2015/07/23 PHP
浅谈Laravel核心解读之Console内核
2018/12/02 PHP
Laravel5.1框架路由分组用法实例分析
2020/01/04 PHP
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
js判断页面中是否有指定控件的简单实例
2014/03/04 Javascript
javascript将浮点数转换成整数的三个方法
2014/06/23 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
Javascript动态创建表格及删除行列的方法
2015/05/15 Javascript
js窗口关闭提示信息(兼容IE和firefox)
2015/10/23 Javascript
Asp.Net之JS生成分页条的方法
2016/11/23 Javascript
微信小程序之ES6与事项助手的功能实现
2016/11/30 Javascript
Vue2单一事件管理组件通信
2017/05/09 Javascript
150行Node.js实现的dns代理工具
2019/08/02 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
2019/11/15 Javascript
Vue实现导航栏菜单
2020/08/19 Javascript
[06:30]DOTA2英雄梦之声_第15期_死亡先知
2014/06/21 DOTA
python高并发异步服务器核心库forkcore使用方法
2013/11/26 Python
Python中逗号的三种作用实例分析
2015/06/08 Python
Python SQLite3数据库日期与时间常见函数用法分析
2017/08/14 Python
python 类对象和实例对象动态添加方法(分享)
2017/12/31 Python
python实现向微信用户发送每日一句 python实现微信聊天机器人
2019/03/27 Python
python的命名规则知识点总结
2019/10/04 Python
Python文本处理简单易懂方法解析
2019/12/19 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
Python如何实现感知器的逻辑电路
2020/12/25 Python
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
应聘教师自荐信
2013/10/12 职场文书
店长职务说明书
2014/02/04 职场文书
自愿离婚协议书2015
2015/01/26 职场文书
行政经理岗位职责
2015/04/15 职场文书
哈姆雷特读书笔记
2015/06/29 职场文书
详解CSS伪元素的妙用单标签之美
2021/05/25 HTML / CSS
java基础——多线程
2021/07/03 Java/Android