canvas 绘制圆形时钟

网络编程 2024/11/15 佚名

3 2 1

效果如下：

代码如下：

<!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,绘制时钟

标签：

canvas,绘制时钟

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“canvas 绘制圆形时钟”

canvas 绘制圆形时钟

暂无“canvas 绘制圆形时钟”评论...

canvas 绘制圆形时钟

canvas,绘制时钟

easy ui datagrid 从编辑框中获取值的方法

jquery实现数字输入框

评论“canvas 绘制圆形时钟”

更新动态

友情链接