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 相关文章推荐
JS+CSS实现自动切换的网页滑动门菜单效果代码
Sep 14 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
Jan 14 Javascript
AngularJS中的API(接口)简单实现
Jul 28 Javascript
深入浅出 jQuery中的事件机制
Aug 23 Javascript
使用JavaScript根据图片获取条形码的方法
Jul 04 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
Mar 13 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
Jul 16 Javascript
浅谈Vue数据响应
Nov 05 Javascript
js模拟F11页面全屏显示
Sep 17 Javascript
过滤器vue.filters的使用方法实现
Sep 18 Javascript
Vue.js标签页组件使用方法详解
Oct 19 Javascript
基于原生JS封装的Modal对话框插件的示例代码
Sep 09 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
模拟OICQ的实现思路和核心程序(一)
2006/10/09 PHP
php定时删除文件夹下文件(清理缓存文件)
2013/01/23 PHP
PHP语法自动检查的Vim插件
2014/08/11 PHP
用 Composer构建自己的 PHP 框架之使用 ORM
2014/10/30 PHP
jquery+php实现导出datatables插件数据到excel的方法
2015/07/06 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
PHP实现一个多功能购物网站的案例
2017/09/13 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
js小技巧--自动隐藏红叉叉
2007/08/13 Javascript
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
2009/08/04 Javascript
js对象之JS入门之Array对象操作小结
2011/01/09 Javascript
jQuery.Validate验证库的使用介绍
2013/04/26 Javascript
JS图片无缝、平滑滚动代码
2014/03/11 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
2014/07/02 Javascript
vue实现消息的无缝滚动效果的示例代码
2017/12/05 Javascript
JS实现运动缓冲效果的封装函数示例
2018/02/18 Javascript
浅谈Vue下使用百度地图的简易方法
2018/03/23 Javascript
React学习笔记之高阶组件应用
2018/06/02 Javascript
vue自动路由-单页面项目(非build时构建)
2019/04/30 Javascript
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
js类的继承定义与用法分析
2019/06/21 Javascript
ElementUI Tag组件实现多标签生成的方法示例
2019/07/08 Javascript
微信小程序实现图片翻转效果的实例代码
2019/09/20 Javascript
python列表操作实例
2015/01/14 Python
Python连接phoenix的方法示例
2017/09/29 Python
python批量读取txt文件为DataFrame的方法
2018/04/03 Python
Python实现求解一元二次方程的方法示例
2018/06/20 Python
PyQt5 多窗口连接实例
2019/06/19 Python
Python空间数据处理之GDAL读写遥感图像
2019/08/01 Python
使用Fabric自动化部署Django项目的实现
2019/09/27 Python
python3实现弹弹球小游戏
2019/11/25 Python
TensorFlow Saver:保存和读取模型参数.ckpt实例
2020/02/10 Python
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
固特异美国在线轮胎店:Goodyear Tire
2019/02/23 全球购物
什么是Web Service?
2012/07/25 面试题
六查六看个人剖析材料
2014/10/14 职场文书