canvas 钟表

最新推荐文章于 2021-07-01 11:58:00 发布

wuko.0

最新推荐文章于 2021-07-01 11:58:00 发布

阅读量115

点赞数 1

分类专栏： css js 文章标签： canvas

本文链接：https://blog.csdn.net/qq_40586654/article/details/81264309

版权

css 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

7 篇文章 0 订阅

订阅专栏


<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<script>

/*arc(x,y,半径，起始弧度，结束弧度，旋转方向)*/

window.onload = function(){

var oC = document.querySelector('#box');

var oGC = oC.getContext('2d');



var x = 200.5;

var y = 200.5;

var r = 200;



function timer(){

oGC.clearRect(0,0,oC.width,oC.height)

var time = new Date();

var h = time.getHours();

var m = time.getMinutes();

var s = time.getSeconds();



var h_val = (h*30-90+m/60*30)*Math.PI/180;

var m_val = (m*6-90+s/60*6)*Math.PI/180;

var s_val = (s*6-90)*Math.PI/180;





/*生成小刻度*/

oGC.beginPath();

oGC.moveTo(x,y);

oGC.lineWidth = 1;

for(var i = 0;i<60;i++){

oGC.arc(x,y,r,i*6*Math.PI/180,(i+1)*6*Math.PI/180,false);

oGC.closePath();

}

oGC.stroke();



/*生成一个白色遮罩层*/

oGC.beginPath();

oGC.fillStyle = '#fff';

oGC.moveTo(x,y);

oGC.arc(x,y,r*0.95,0,2*Math.PI,false);

oGC.closePath();

oGC.fill();



/*生成大刻度*/

oGC.beginPath();

oGC.lineWidth = 2;

oGC.moveTo(x,y);

for(var i = 0;i<12;i++){

oGC.arc(x,y,r,i*30*Math.PI/180,(i+1)*30*Math.PI/180,false);

oGC.closePath();

}

oGC.stroke();



/*生成一个白色遮罩层*/

oGC.beginPath();

oGC.fillStyle = '#fff';

oGC.moveTo(x,y);

oGC.arc(x,y,r*0.9,0,2*Math.PI,false);

oGC.closePath();

oGC.fill();





/*时针*/

oGC.beginPath();

oGC.lineWidth = 4;

oGC.moveTo(x,y);

oGC.arc(x,y,r*0.5,h_val,h_val);

oGC.closePath();

oGC.stroke();





/*分针*/

oGC.save();

oGC.beginPath();

oGC.strokeStyle = '#00f';

oGC.lineWidth = 2;

oGC.moveTo(x,y);

oGC.arc(x,y,r*0.6,m_val,m_val);

oGC.closePath();

oGC.stroke();

oGC.restore();



/*秒针*/

oGC.save();

oGC.beginPath();

oGC.strokeStyle = '#f00';

oGC.lineWidth = 1;

oGC.moveTo(x,y);

oGC.arc(x,y,r*0.7,s_val,s_val);

oGC.closePath();

oGC.stroke();

oGC.restore();



/*刻度钉*/

oGC.fillStyle = '#f00';

oGC.beginPath();

oGC.moveTo(x,y)

oGC.arc(x,y,r*0.03,0,2*Math.PI)

oGC.closePath();

oGC.fill();

}

timer();

setInterval(timer,500);

}

</script>

</head>



<body>

<canvas id="box" height="400" width="400" style="border:1px solid #000"></canvas>

</body>

</html>

wuko.0

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
canvas 钟表

&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;无标题文档&lt;/title&gt; &lt;script&gt; /*arc(x,y,半径，起始弧度，
复制链接

扫一扫

专栏目录