canvas实现钟表效果
更新时间：2017年02月13日 08:38:20 作者：marie0119
本文主要分享了canvas实现钟表效果的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
效果如下：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas画钟表</title>
<style>
body{
background: #fc0;
}
#canvas1{
background: #fff;
}
</style>
</head>
<body>
<canvas id="canvas1" width="400" height="400"></canvas>
<script>
var oC=document.getElementById('canvas1');
var oGC=oC.getContext('2d');
function toDraw(){
var x=200;
var y=200;
var r=150;
oGC.clearRect(0,0,oC.width,oC.height);
var oDate=new Date();
var oHour=oDate.getHours();
var oMinu=oDate.getMinutes();
var oSec=oDate.getSeconds();
var hVal=(-90+oHour*30+oMinu/2)*Math.PI/180;
var mVal=(-90+oMinu*6)*Math.PI/180;
var sVal=(-90+oSec*6)*Math.PI/180;
oGC.beginPath();
for(i=0;i<60;i++){
oGC.moveTo(x,y);
oGC.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
}
oGC.closePath();
oGC.stroke();
oGC.fillStyle='#fff';
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*19/20,0,360*Math.PI/180,false);
oGC.closePath();
oGC.fill();
oGC.lineWidth=3;
oGC.beginPath();
for(i=0;i<12;i++){
oGC.moveTo(x,y);
oGC.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
}
oGC.closePath();
oGC.stroke();
oGC.fillStyle='#fff';
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*18/20,0,360*Math.PI/180,false);
oGC.closePath();
oGC.fill();
oGC.lineWidth=5;
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*10/20,hVal,hVal,false);
oGC.closePath();
oGC.stroke();
oGC.lineWidth=3;
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*14/20,mVal,mVal,false);
oGC.closePath();
oGC.stroke();
oGC.lineWidth=1;
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*17/20,sVal,sVal,false);
oGC.closePath();
oGC.stroke();
}
setInterval(toDraw,1000);
toDraw();
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
bootstrap制作jsp页面（根据值让table显示选中）
这篇文章主要为大家详细介绍了bootstrap做的jsp页面,根据值让table显示选中，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
前端报错Failed to resolve component: smile-outlined If thi
这篇文章主要为大家介绍了前端报错 Failed to resolve component: smile-outlined If this is a native custom 的问题分析解决，有需要的朋友可以借鉴参考下2023-06-06
上篇中的选项卡存在这样的问题：把逻辑封装在table.js中，不够灵活，也就是说如果某个选项卡是实现异步请求或者跳转，而非div的显隐切换，那么就得修过table.js来达到目的，显然不是我所需要的。2010-05-05
虽然小程序在刚推出时是不支持组件化的,但如今小程序开始支持自定义组件开发,下面这篇文章主要给大家介绍了关于微信小程序组件化开发的相关资料,需要的朋友可以参考下2023-03-03
今天小编就为大家分享一篇使用layui+ajax实现简单的菜单权限管理及排序的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要介绍了javascript多物体运动实现方法,结合实例形式分析了JavaScript多物体运动的相关注意事项与具体实现代码,包含四个div块的横向、竖向移动,颜色与边框渐变效果,需要的朋友可以参考下2016-01-01
这篇文章主要介绍了JavaScript中判断整数的多种方法总结,本文总结了5种判断整数的方法,如取余运算符判断、Math.round、Math.ceil、Math.floor判断等,需要的朋友可以参考下2014-11-11
本篇文章主要是对javascript实现数字验证码的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
在本篇文章中我们给大家分享了几种使用JavaScript数组容易出错的例子，需要的朋友们可以参考下。2018-09-09
这篇文章主要介绍了JS获取短信验证码倒计时的实现代码,需要的朋友可以参考下2017-05-05
最新评论