这篇文章主要介绍了JS+H5怎么使用Canvas实现时钟效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
用JavaScript+Canvas来实现最简单的时钟效果，供大家参考，具体内容如下
效果图：
先看html代码：
计算
安全
数据库
网络和加速
企业服务
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/demo3.js" ></script>
</head>
<body>
<canvas id = "canvas"></canvas>
</body>
</html>JavaScript代码：
var canvas,context;
function draw(){//定义划时钟的方法
var data = new Date();
var hHoure = data.getHours();
var mMin = data.getMinutes();
var sSec = data.getSeconds();
var hValue = (hHoure*30+mMin/2-90)*Math.PI/180;
var mValue = (mMin*6-90)*Math.PI/180;
var sValue = (sSec*6 -90)*Math.PI/180;
var x = 200,y = 200,r = 150;
context.clearRect(0,0,canvas.width,canvas.height);
context.moveTo(x,y);
context.arc(x,y,r,0,6*Math.PI/180,false);
//
context.beginPath();
context.lineWidth = 1;
for(var i = 0;i<60;i++){
context.moveTo(x,y);
context.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
}
context.closePath();
context.stroke();
//
context.beginPath();
context.fillStyle = "white";
context.moveTo(x,y);
context.arc(x,y,r/1.1,-0,2*Math.PI,false);
context.closePath();
context.fill();
//
context.beginPath();
context.lineWidth = 3;
for(var i = 0;i<12;i++){
context.moveTo(x,y);
context.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI,false);
}
context.closePath();
context.stroke();
//
context.beginPath();
context.fillStyle = "white";
context.moveTo(x,y);
context.arc(x,y,r/1.12,0,2*Math.PI,false);
context.closePath();
context.fill();
context.beginPath();
context.fillStyle = "black";
context.moveTo(x,y);
context.arc(x,y,r/30,0,2*Math.PI,false);
context.fill();
//
context.beginPath();
context.lineWidth = 5;
context.moveTo(x,y);
context.arc(x,y,r/2.5,hValue,hValue,false);
context.stroke();
//
context.beginPath();
context.lineWidth = 3;
context.moveTo(x,y);
context.arc(x,y,r/2,mValue,mValue,false);
context.stroke();
//
context.beginPath();
context.lineWidth = 2;
context.moveTo(x,y);
context.arc(x,y,r/1.6,sValue,sValue,false);
context.stroke();
}
window.onload = function(){
canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
canvas.height = 500;
canvas.width = 500;
setInterval(draw,1000);
draw();
}1.可以使网页具有交互性，例如响应用户点击，给用户提供更好的体验。 2.可以处理表单，检验用户的输入，并提供及时反馈节省用户时间。 3.可以根据用户的操作，动态的创建页面。 4使用JavaScript可以通过设置cookie存储在浏览器上的一些临时信息。
感谢你能够认真阅读完这篇文章，希望小编分享的“JS+H5怎么使用Canvas实现时钟效果”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
