html js canvas 实现钟表

最新推荐文章于 2024-01-31 16:02:42 发布

会宇

最新推荐文章于 2024-01-31 16:02:42 发布

阅读量341

点赞数

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

本文链接：https://blog.csdn.net/qq_39237554/article/details/107933257

版权

html 同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

15 篇文章 0 订阅

订阅专栏

canvas

5 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <style>
    canvas{
      display: block;
      margin: auto;
	  border: 1px solid #CCC;
    }
  </style>
  <title>钟表</title>
</head>
<body>



<canvas id="canvas" >您的浏览器不支持canvas</canvas>


</body>
<script>

  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  var width = 1000;
  var height = 500;
  var cx = width / 2;   // 画布中心x
  var cy = height / 2;  // 画布中心y
  
  var size = 200; // 表大小
  
  canvas.width = width;
  canvas.height = height;
  
  draw();
  setInterval(draw, 1000);
  
  function draw(){
	  // 时间类
	  var date = new Date();
	  // 获取时
	  var hours = date.getHours();
	  // 获取分
	  var min = date.getMinutes();
	  // 获取秒
	  var sec = date.getSeconds();
	  // 外圈
	  drawOuter();
	  // 时间
	  drawText();
	  // 刻度
	  drawScale();
	  // 时针
	  drawHour(hours, min);
	  // 分针
	  drawMid(min, sec);
	  // 秒针
	  drawSec(sec);
  }
  
  // 画出表外圈
  function drawOuter(){
	  // 最外圈
	  ctx.arc(cx, cy, size + 30, 0, Math.PI * 2);
	  ctx.fillStyle = "#000033";
	  ctx.fill();
	  ctx.beginPath();
	  
	  // 内圈
	  ctx.arc(cx, cy, size, 0, Math.PI * 2);
	  ctx.fillStyle = "white";
	  ctx.fill();
	  ctx.beginPath();
	  
	  // 中间原点
	  ctx.arc(cx, cy, 10, 0, Math.PI * 2);
	  ctx.fillStyle = "#000033";
	  ctx.fill();
	  ctx.beginPath(); 
  }
  
  // 画字
  function drawText(){
	  var radian = 0, x = 0, y = 0;
	  var angle = -60; // 从1点开始画, 1点到2点之间的角度是30度
	  for(var i = 0 ; i < 12 ; i++){ 
	      radian = angle * Math.PI / 180;
		  x = Math.cos(radian) * (size - 50) + cx;
		  y = Math.sin(radian) * (size - 50) + cy;
		  ctx.textAlign = "center";    // 文字横向居中
		  ctx.textBaseline = "middle"; // 文字竖向居中
		  ctx.font = "45px Arial";
		  ctx.fillText(i + 1, x, y);
		  ctx.beginPath();
		  angle += 30;
	  }
  }
  
  // 画刻度
  function drawScale(){
	  var radian = 0, x = 0, y = 0;
	  var s = 15;
	  var lineWidth  = 0;
	  for(var angle = 0 ; angle <= 360 ; angle += 6){ 
	      radian = angle * Math.PI / 180;
		  
		  // 画长刻度
		  if(angle % 30 == 0){
		      s = 20;
			  lineWidth = 3;
		  }
		  // 画短
		  else{  
		      s = 15;
			  lineWidth = 1;
		  }
		  
		  // 刻度起点是 size - s 
		  x = Math.cos(radian) * (size - s) + cx;
		  y = Math.sin(radian) * (size - s) + cy;
		  ctx.moveTo(x, y);
		  
		  // 刻度终点
		  for(var j = 0 ; j < s ; j++){
			  x += Math.cos(radian);
			  y += Math.sin(radian);
		  }
		  ctx.lineTo(x, y);
		  
		  // 设置刻度宽度
		  ctx.lineWidth = lineWidth;
		  ctx.stroke();
		  ctx.beginPath();
	  }
  }
  
  // 画时针, hour 时间, min 分钟
  function drawHour(hour, min){
	  // 小时 * 每小时之间的角度 - 90度(默认指向3点, 3*30=90) + (分钟已经走过了小时的百分之多少) 
	  var angle = (hour * 30 - 90) + (30 * (min / 60));
	  // 角度转换为弧度, cos sin 的参数都是弧度
	  var radian = angle * Math.PI / 180;
	  // 长度
	  var s = 100; 
	  ctx.beginPath();
	  ctx.moveTo(cx, cy);
	  ctx.lineTo(Math.cos(radian) * s + cx, Math.sin(radian) * s + cy);
	  ctx.lineWidth = 10;
	  ctx.stroke();
  }
  
  // 画分针
  function drawMid(min, src){
	  // 0 默认在 3点的位置, 分钟与分钟的角度是6度, 要减去 15分钟 * 6度, 将分钟指向12点
	  // (6 * (src / 60)) = 秒已经走过了, 这分钟的百分比 * 6度
	  var angle = (min * 6 - 15 * 6) + (6 * (src / 60));
	  // 角度转换为弧度, cos sin 的参数都是弧度
	  var radian = angle * Math.PI / 180;
	  var s = 180; // 长度
	  ctx.beginPath();
	  ctx.moveTo(cx, cy);
	  ctx.lineTo(Math.cos(radian) * s + cx, Math.sin(radian) * s + cy);
	  ctx.lineWidth = 5;
	  ctx.stroke();
  }
  
   // 画秒
  function drawSec(src){
	  var angle = src * 6 - 15 * 6; // 0 默认在 3点的位置, 分钟与分钟的角度是6度, 要减去 15分钟 * 6度, 将分钟指向12点
	  var radian = angle * Math.PI / 180;
	  var s = 160; // 秒针1 长度
	  var s1 = 50; // 秒针2 长度
	  
	  // 秒针
	  ctx.beginPath();
	  ctx.moveTo(cx, cy);
	  ctx.lineTo(Math.cos(radian) * s + cx, Math.sin(radian) * s + cy);
	  ctx.lineWidth = 1;
	  ctx.stroke();
	  
	  // 秒针红点
	  ctx.beginPath();
	  ctx.arc(Math.cos(radian) * s + cx, Math.sin(radian) * s + cy, 5, 0, Math.PI * 2);
	  ctx.fillStyle = "red";
	  ctx.fill();
	  
	  // 反向(短)秒针
	  angle = (src * 6 - 15 * 6) + 180; // +180度, 于秒针相反
	  radian = angle * Math.PI / 180;
	  ctx.beginPath();
	  ctx.moveTo(cx, cy);
	  ctx.lineTo(Math.cos(radian) * s1 + cx, Math.sin(radian) * s1 + cy);
	  ctx.lineWidth = 3;
	  ctx.stroke();
  }
  
</script>

</html>

会宇

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
html js canvas 实现钟表

<!doctype html><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <style> canvas{ display: block; margin: auto; border: 1px solid #CCC; } </style>...
复制链接

扫一扫