基于canvas的电子始终
Posted 凌晨四点的北京
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基于canvas的电子始终相关的知识，希望对你有一定的参考价值。
//code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body,html{
width: 100%;
height: 100%;
background: url(images/deadpool-bg.png);
background-size: 100% 100%;
overflow: hidden;
}
#myCanvas{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background: /*aqua*/;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="600" height="600">您的浏览器不支持canva</canvas>
<script type="text/javascript">
var Mycanvas=document.getElementById(\'myCanvas\');
var canvas=Mycanvas.getContext(\'2d\')
function drawClock(){
canvas.clearRect(0,0,610,610)
// 获取当前时间
var currentTime=new Date();
var hour=currentTime.getHours();
var minutes=currentTime.getMinutes();
hour=hour+minutes/60
var second=currentTime.getSeconds();
canvas.beginPath();
canvas.lineWidth=5
canvas.strokeStyle=\'aqua\';
canvas.arc(300,300,295,0,Math.PI*2,false);
canvas.stroke();
//画刻度线
for(let i=0;i<60;i++)
{
canvas.save();
canvas.translate(300,300);
canvas.rotate(i*6*Math.PI/180)
canvas.beginPath();
canvas.moveTo(0,270);
canvas.strokeStyle=\'red\';
canvas.lineTo(0,292);
canvas.lineWidth=2;
canvas.stroke();
canvas.restore()
}
for(let i=0;i<12;i++)
{
canvas.save();
canvas.translate(300,300);
canvas.rotate(i*30*Math.PI/180)
canvas.beginPath();
canvas.moveTo(0,250);
canvas.strokeStyle=\'red\';
canvas.lineTo(0,292);
canvas.lineWidth=3;
canvas.stroke();
canvas.restore()
}
//时针
canvas.save();
canvas.translate(300,300);
canvas.rotate(hour*30*Math.PI/180)
canvas.beginPath();
canvas.moveTo(0,15);
canvas.strokeStyle=\'red\';
canvas.lineTo(0,-200);
canvas.lineWidth=3;
canvas.stroke();
canvas.restore()
//分针
canvas.save();
canvas.translate(300,300);
canvas.rotate(minutes*6*Math.PI/180)
canvas.beginPath();
canvas.moveTo(0,-240);
canvas.strokeStyle=\'red\';
canvas.lineTo(0,10);
canvas.lineWidth=3;
canvas.stroke();
canvas.restore()
//miao针
canvas.save();
canvas.translate(300,300);
canvas.rotate(second*6*Math.PI/180)
canvas.beginPath();
canvas.moveTo(0,-290);
canvas.strokeStyle=\'yellow\';
canvas.lineTo(0,20);
canvas.lineWidth=2;
canvas.stroke();
//小圈圈⭕1️
canvas.beginPath();
// canvas.rotate(second*6*Math.PI/180)
canvas.arc(0,0,5,0,Math.PI*2,false)
canvas.fillStyle=\'black\';
canvas.fill();
canvas.stroke();
//小圈圈⭕2️
canvas.beginPath();
// canvas.rotate(0)
canvas.arc(0,-250,5,0,Math.PI*2,false)
canvas.fillStyle=\'black\';
canvas.fill();
canvas.strokeStyle=\'#fff\'
canvas.stroke()
canvas.restore()
}
drawClock()
setInterval(function(){
drawClock()
},1000)
</script>
<script src="./jquery-2.1.1.min.js"></script>
</body>
</html>
以上是关于基于canvas的电子始终的主要内容，如果未能解决你的问题，请参考以下文章