(难度:13%)js里面的canvas实现时钟

最新推荐文章于 2021-06-28 15:15:49 发布

木木钧

最新推荐文章于 2021-06-28 15:15:49 发布

阅读量501

点赞数

本文链接：https://blog.csdn.net/lj654548718/article/details/27255881

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

时钟会一直保持与当前时间同步

ie8或以下的浏览器不支持canvas

因为代码比较短, 所以脚本, html和css混在一起写了,希望大家不要介意...

<!DOCTYPE html>
<html>
<head>
<title>Canvas element size: 600 x 300, Canvas drawing surface size: 600 x 300</title>
<style>
  body{
    margin: 20px auto;
    width: 960px;
    background: black;
    text-align: center;
  }

</style>
</head>
<body>
  <canvas id='canvas' width="500px" height="500px">
    canvas not support
  </canvas>
</body>
<script>
var canvas=document.getElementById("canvas");
var context=canvas.getContext('2d');
var radius=canvas.width/2-20;
var headRadius=7;
var cenx=canvas.width/2;
var ceny=canvas.height/2;
var hlen=radius-115;
var mlen=radius-75;
var slen=radius-25;
var color=['red','#f0cccc','orange','#0cf','#99ff00'];
function drawHMS(angle,len,color){
  context.beginPath();
  context.moveTo(cenx,ceny);
  x=len*Math.cos(angle)+cenx;
  y=len*Math.sin(angle)+ceny;
  context.lineTo(x,y)
  context.stroke();
  //画针头的图案
  x=(len+headRadius)*Math.cos(angle)+cenx;
  y=(len+headRadius)*Math.sin(angle)+ceny;
  context.beginPath();
  context.moveTo(x,y);
  context.fillStyle=color;
  context.arc(x,y,headRadius,0,Math.PI*2,true);
  context.fill();
}
function draw(){
  var i,x,y;
  var angle;
  //画圆
  context.beginPath();
  context.fillStyle="white";
  context.fillRect(0,0,canvas.width,canvas.height);
  context.arc(cenx,ceny,radius,0,Math.PI*2,true);
  //必须调用下面这句才有效果
  context.stroke();

  //画中心点
  //下面这句必须,不然arc设定的半径必须比之前的大
  context.beginPath();
  context.fillStyle="#FFFF00";
  context.arc(canvas.width/2,canvas.height/2,20,0,Math.PI*2,true);
  context.fill();

  //画数字
  context.fillStyle="black";
  context.font='30px asdas'
  for (i=1;i<=12;i++){
    context.beginPath();
    var _color=color[i%(color.length)];
    context.fillStyle=_color;
    x=(radius-30)*Math.cos(Math.PI/6*i+Math.PI*1.5);
    y=(radius-30)*Math.sin(Math.PI/6*i+Math.PI*1.5);
    context.fillText(i,x+cenx-8,y+ceny+10);
  }
  /
  for (i=1;i<=60;i++){
    context.beginPath();
    var _len=5;
    if (i%5==0) _len=15; 
    x=(radius-_len)*Math.cos(Math.PI/30*i+Math.PI*1.5)+cenx;
    y=(radius-_len)*Math.sin(Math.PI/30*i+Math.PI*1.5)+ceny;
    context.moveTo(x,y);
    var xx=radius*Math.cos(Math.PI/30*i+Math.PI*1.5)+cenx;
    var yy=radius*Math.sin(Math.PI/30*i+Math.PI*1.5)+ceny;
    context.lineTo(xx,yy);
    context.stroke();
  }

  var date=new Date();
  var sec=date.getSeconds();
  var min=date.getMinutes();
  var hour=date.getHours();  if (hour>=12) hour-=12;

  //秒针
  angle=Math.PI/30*sec-Math.PI/2;
  drawHMS(angle,slen,"orange");
  //分针
  angle=Math.PI/30*min+Math.PI/1800*sec-Math.PI/2;
  drawHMS(angle,mlen,"#0cf");
  //时针
  angle=Math.PI/6*hour+Math.PI/360*min-Math.PI/2;
  drawHMS(angle,hlen,"#99ff00");

}
setInterval(draw,1000);
</script>
</html>

运行效果: