JS+Canvas绘制时钟效果
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JS+Canvas绘制时钟效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4201字，纯文字阅读大概需要7分钟。
内容图文
本文实例为大家分享了使用canvas绘制时钟的具体代码，供大家参考，具体内容如下1. clock.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Description" content="">
<title>canvas时钟</title>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<script>
var canvas=document.getElementById("canvas");
var context=canvas.getContext('2d');
//draw();
function draw(){
//得到当前系统的时分秒
var now=new Date();
var sec=now.getSeconds();
var min=now.getMinutes();
var hour=now.getHours();
hour>=12&&(hour=hour-12);
var radius = Math.min(canvas.width/2,canvas.height/2);
//初始化画布
context.save();
context.clearRect(0,0,canvas.width,canvas.height);
context.translate(canvas.width/2,canvas.height/2);
context.rotate(-Math.PI/2);
context.save();
//表框
//小时刻度
context.strokeStyle="black";
context.fillStyle="black";
context.lineWidth=3;
context.lineCap="round";
context.beginPath();
for(var i=0;i<12;i++){
context.rotate(Math.PI/6);
context.moveTo(radius-30,0);
context.lineTo(radius-10,0);
}
context.stroke();
context.restore();
context.save();
//分钟刻度
context.lineWidth=2;
context.beginPath();
for(var i=0;i<60;i++){
if(!i%5==0){
context.moveTo(radius-15,0);
context.lineTo(radius-10,0);
}
context.rotate(Math.PI/30);
}
context.stroke();
context.restore();
context.save();
//画上时针
context.rotate((Math.PI/6)*hour+(Math.PI/360)*min+(Math.PI/21600)*sec);
context.lineWidth=6;
context.beginPath();
context.moveTo(-10,0);
context.lineTo(radius*0.5,0);
context.stroke();
context.restore();
context.save();
context.rotate((Math.PI/30)*min+(Math.PI/1800)*sec);
context.strokeStyle="#29A8DE";
context.lineWidth=4;
context.lineCap="butt";
context.beginPath();
context.moveTo(-20,0);
context.lineTo(radius*0.7,0);
context.stroke();
context.restore();
context.save();
context.rotate(sec*Math.PI/30);
context.strokeStyle="red";
context.lineWidth=2;
context.lineCap="butt";
context.beginPath();
context.moveTo(-30,0);
context.lineTo(radius*0.9,0);
context.stroke();
context.restore();
context.save();
context.lineWidth=4;
context.strokeStyle="gray";
context.beginPath();
context.arc(0,0,radius,0,Math.PI*2,true);
context.stroke();
context.restore();
context.restore();
}
window.onload=function(){
setInterval(draw,1000)
}
</script>
</body>
</html>2. JavaScript代码
<script>
var canvas=document.getElementById("canvas");
var context=canvas.getContext('2d');
//draw();
function draw(){
//得到当前系统的时分秒
var now=new Date();
var sec=now.getSeconds();
var min=now.getMinutes();
var hour=now.getHours();
hour>=12&&(hour=hour-12);
var radius = Math.min(canvas.width/2,canvas.height/2);
//初始化画布
context.save();
context.clearRect(0,0,canvas.width,canvas.height);
context.translate(canvas.width/2,canvas.height/2);
context.rotate(-Math.PI/2);
context.save();
//表框
//小时刻度
context.strokeStyle="black";
context.fillStyle="black";
context.lineWidth=3;
context.lineCap="round";
context.beginPath();
for(var i=0;i<12;i++){
context.rotate(Math.PI/6);
context.moveTo(radius-30,0);
context.lineTo(radius-10,0);
}
context.stroke();
context.restore();
context.save();
//分钟刻度
context.lineWidth=2;
context.beginPath();
for(var i=0;i<60;i++){
if(!i%5==0){
context.moveTo(radius-15,0);
context.lineTo(radius-10,0);
}
context.rotate(Math.PI/30);
}
context.stroke();
context.restore();
context.save();
//画上时针
context.rotate((Math.PI/6)*hour+(Math.PI/360)*min+(Math.PI/21600)*sec);
context.lineWidth=6;
context.beginPath();
context.moveTo(-10,0);
context.lineTo(radius*0.5,0);
context.stroke();
context.restore();
context.save();
context.rotate((Math.PI/30)*min+(Math.PI/1800)*sec);
context.strokeStyle="#29A8DE";
context.lineWidth=4;
context.lineCap="butt";
context.beginPath();
context.moveTo(-20,0);
context.lineTo(radius*0.7,0);
context.stroke();
context.restore();
context.save();
context.rotate(sec*Math.PI/30);
context.strokeStyle="red";
context.lineWidth=2;
context.lineCap="butt";
context.beginPath();
context.moveTo(-30,0);
context.lineTo(radius*0.9,0);
context.stroke();
context.restore();
context.save();
context.lineWidth=4;
context.strokeStyle="gray";
context.beginPath();
context.arc(0,0,radius,0,Math.PI*2,true);
context.stroke();
context.restore();
context.restore();
}
window.onload=function(){
setInterval(draw,1000)
}
</script>以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。
更多JS+Canvas绘制时钟效果相关文章请关注PHP中文网！
内容总结
以上是互联网集市为您收集整理的JS+Canvas绘制时钟效果全部内容，希望文章能够帮你解决JS+Canvas绘制时钟效果所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】