脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → canvas绘制表盘时钟

canvas绘制表盘时钟

 更新时间：2017年01月23日 10:21:56   作者：艾瑞卡  
本文主要分享了canvas绘制表盘时钟的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧

话不多说，请看代码：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>canvas绘制表盘</title>
</head>
<body>
 <canvas id='box' width="500" height="500" >
 您的浏览器不支持canvas
 </canvas>
 <script>
 var box = document.getElementById('box');
 var cxt = box.getContext('2d');
 // 时钟动起来
 var timer = null;
 function clock(){
 var date = new Date();
 var h = date.getHours();
 h = h + h/60;
 h = h>12? h-12:h;
 var m = date.getMinutes();
 var s = date.getSeconds();
 // 清画布
 cxt.clearRect(0,0,500,500); 
 // 画表盘
 cxt.strokeStyle = '#f0f';
 cxt.lineWidth = 6;
 cxt.beginPath();
 cxt.arc(250,250,100,0,2*Math.PI);
 cxt.stroke();
 // 画时钟刻度
 for(var i=0; i<12; i++){
 cxt.save();
 cxt.translate(250,250);
 cxt.rotate(30*i*Math.PI/180);
 cxt.lineWidth = 3;
 cxt.beginPath();
 cxt.moveTo(0,-80);
 cxt.lineTo(0,-92);
 cxt.stroke();
 cxt.restore();
 }
 //画分钟刻度
 for(var i=0; i<60; i++){
 cxt.save();
 cxt.translate(250,250);
 cxt.rotate(6*i*Math.PI/180);
 cxt.lineWidth = 2;
 cxt.beginPath();
 cxt.moveTo(0,-86);
 cxt.lineTo(0,-92);
 cxt.stroke();
 cxt.restore();
 }
 // 画时针
 cxt.save();
 cxt.lineWidth = 5;
 cxt.translate(250,250);
 cxt.rotate(h*30*Math.PI/180);
 cxt.beginPath();
 cxt.moveTo(0,6);
 cxt.lineTo(0,-40);
 cxt.stroke();
 cxt.restore();
 // 画分针
 cxt.save();
 cxt.lineWidth = 3;
 cxt.translate(250,250);
 cxt.rotate(m*6*Math.PI/180);
 cxt.beginPath();
 cxt.moveTo(0,8);
 cxt.lineTo(0,-60);
 cxt.stroke();
 cxt.restore();
 // 画秒针
 cxt.save();
 cxt.lineWidth = 1;
 cxt.translate(250,250);
 cxt.rotate(s*6*Math.PI/180);
 cxt.beginPath();
 cxt.moveTo(0,10);
 cxt.lineTo(0,-75);
 cxt.stroke();
 cxt.restore();
 // 画中心的小圆固定三根针
 cxt.save();
 cxt.beginPath();
 cxt.fillStyle = '#0f0';
 cxt.lineWidth = 2;
 cxt.translate(250,250);
 cxt.arc(0,0,2,0,360,false);
 cxt.stroke();
 cxt.fill();
 cxt.restore();
 // 画秒针上的园
 cxt.save();
 cxt.fillStyle = '#f00';
 cxt.lineWidth = 2;
 cxt.translate(250,250);
 cxt.rotate(s*6*Math.PI/180);
 cxt.beginPath();
 cxt.arc(0,-60,2,0,360,false);
 cxt.stroke();
 cxt.fill();
 cxt.restore();
 }
 clock();
 timer = setInterval(clock,1000);
 </script>
</body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 微信小程序之 catalog 切换实现解析

    微信小程序之 catalog 切换实现解析

    这篇文章主要介绍了微信小程序之 catalog 切换实现解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • Typescript 中的 interface 和 type 到底有什么区别详解

    Typescript 中的 interface 和 type 到底有什么区别详解

    这篇文章主要介绍了Typescript 中的 interface 和 type 到底有什么区别详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • javascript客户端解决方案 缓存提供程序

    javascript客户端解决方案 缓存提供程序

    这是介绍的是一个不错的javascript的方面的客户端解决方案,可选配支持HTML5本地存储器.
    2010-07-07
  • bootstrap fileinput插件实现预览上传照片功能

    bootstrap fileinput插件实现预览上传照片功能

    这篇文章主要介绍了bootstrap fileinput插件实现预览上传照片功能,代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2018-01-01
  • js实现淡入淡出轮播切换功能

    js实现淡入淡出轮播切换功能

    本文主要分享了javascript实现淡入淡出轮播切换功能的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • js实现键盘自动打字效果

    js实现键盘自动打字效果

    本文主要介绍了基于jQuery实现的简单版键盘自动打字效果，具有很好的参考价值，下面就跟着小编一起来看下吧
    2016-12-12
  • js数组依据下标删除元素

    js数组依据下标删除元素

    一直在使用js相关的东西，但很少作总结，今天遇到操作js数组的一些问题，对js的数组有了更进一步的认识
    2015-04-04
  • 在微信小程序中使用vant的方法

    在微信小程序中使用vant的方法

    这篇文章主要介绍了在微信小程序中使用vant的方法，文中通过示例代码介绍的非常详细，对大家学习或者使用小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-06-06
  • 微信小程序scroll-view实现左右联动

    微信小程序scroll-view实现左右联动

    这篇文章主要为大家详细介绍了微信小程序scroll-view实现左右联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 浅谈layui框架自带分页和表格重载的接口解析问题

    浅谈layui框架自带分页和表格重载的接口解析问题

    今天小编就为大家分享一篇浅谈layui框架自带分页和表格重载的接口解析问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09

最新评论