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>

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

# canvas # 绘制时钟 # js Canvas绘制圆形时钟效果 # html5 canvas js(数字时钟)实例代码 # javascript结合Canvas 实现简易的圆形时钟 # JS+Canvas绘制时钟效果 # JavaScript html5 canvas绘制时钟效果(二) # js Canvas实现圆形时钟教程 # JavaScript学习小结之使用canvas画“哆啦A梦”时钟 # canvas仿iwatch时钟效果 # body # ccc # solid # height # id # top # margin # div # border # px # script # function # heigth # getContext # translate # save # drawBackground # dom # var # javascript

返回目录在线咨询

上一篇：如何使用Golang进行集成测试_Golang集成测试运行方法
下一篇：免费五站合一建站系统的SEO优化功能有哪些优势？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

canvas 绘制圆形时钟

您的项目需求