纯JS+html5新标签canvas绘制与本地时间同步时针

最新推荐文章于 2022-02-21 21:23:46 发布

想旅游咯

最新推荐文章于 2022-02-21 21:23:46 发布

阅读量892

点赞数

分类专栏： web前端

web前端专栏收录该内容

109 篇文章

订阅专栏

本文介绍了一个使用HTML5 canvas元素实现的动态时间同步的时钟，通过JavaScript实时更新时间并绘制到画布上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="Generator" content="EditPlus®">

<meta name="Author" content="">

<meta name="Keywords" content="">

<meta name="Description" content="">

<title>Document</title>

<style>

body{background:black;}

#c1{background:white;}

</style>

<script>

window.onload = function(){

var oc = document.getElementById('c1');//获取元素

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 ohours=odate.getHours();//获取本地时间时值

var omin=odate.getMinutes();//获取本地时间分值

var osec=odate.getSeconds();//获取本地时间秒值

var ohoursvalue=(-90+ohours*30+omin/2)*Math.PI/180;//根据获得的时间值计算出时针的弧度

var ominvalue=(-90+omin*6)*Math.PI/180;//根据获得的时间值计算出分针的弧度

var osecvalue=(-90+osec*6)*Math.PI/180;//根据获得的时间值计算出秒针的弧度

/*ogc.moveTo(x,y);

ogc.arc(x,y,r,0,6*Math.PI/180,12*Math.PI/180,false);*/

ogc.beginPath();//开始绘制一个大圆大圆有for循环实现60次的6弧度圆弧

for(var 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();//60次绘制后结束绘制如图1

ogc.stroke();//结束绘制

ogc.fillStyle="white";//填充为白色的半径为原来19/20的圆如图2

ogc.beginPath();

ogc.moveTo(x,y);

ogc.arc(x,y,r*19/20,0,360*(i+1)*Math.PI/180,false);

ogc.closePath();

ogc.fill();

ogc.lineWidth="4";

ogc.beginPath();//开始绘制一个大圆大圆有for循环实现12次的30弧度圆弧

for(var 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();//12次绘制后结束绘制如图3

ogc.stroke();

ogc.fillStyle="white";//填充为白色的半径为原来19/20的圆如图4

ogc.beginPath();

ogc.moveTo(x,y);

ogc.arc(x,y,r*18/20,0,360*(i+1)*Math.PI/180,false);

ogc.closePath();

ogc.fill();

ogc.lineWidth="5";//时针的线性显示的粗细值

ogc.beginPath();

ogc.moveTo(x,y);

ogc.arc(x,y,r*10/20,ohoursvalue,ohoursvalue,false);//绘制时针由变量oohoursvalue动态的绘制出时针的位置不断的变动

ogc.closePath();//

ogc.stroke();

ogc.lineWidth="3";

ogc.beginPath();

ogc.moveTo(x,y);

ogc.arc(x,y,r*14/20,ominvalue,ominvalue,false);//绘制分针由变量ominvalue动态的绘制出分针的位置不断的变动

ogc.closePath();//

ogc.stroke();

ogc.lineWidth="1";

ogc.beginPath();

ogc.moveTo(x,y);

ogc.arc(x,y,r*19/20,osecvalue,osecvalue,false);//绘制秒针由变量osecvalue动态的绘制出秒针的位置不断的变动

ogc.closePath();//

ogc.stroke();

}

setInterval(toDraw,1000);//定时器每隔一秒执行toDraw一次对应上面的清除画布一次

toDraw();//调用自定义函数

};

</script>

</head>

<body>

<canvas id="c1" width="400" height="400"></canvas>

</body>

</html>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。