DDR爱好者之家

javascript绘制简单钟表效果
站长资源 2024/4/20 佚名
3 1538
DDR爱好者之家 Design By 杰米

本文给大家分享一个canvas的时钟绘制，供大家参考，具体内容如下

javascript绘制简单钟表效果

复制可直接使用

<!DOCTYPE html>
<html>

 <head>
 <meta charset="UTF-8">
 <title></title>
 <style>
 h1 {
 text-align: center;
 }
 
 div {
 width: 400px;
 height: 400px;
 margin: 10px auto;
 padding: 0;
 }
 </style>
 </head>

 <body>
 <h1>手绘时钟</h1>
 <hr />
 <div>
 <canvas id="c1" width="400px" height="400px">
 
 </canvas>
 </div>
 <script type="text/javascript">
 var clock = document.getElementById("c1").getContext("2d");
 
// var clock = $("#huabu").get(0).getContext("2d"); //$中使用画布
 
 function play() {
 clock.clearRect(0, 0, 400, 400);
 clock.save();
 clock.translate(200, 200); //把画布中心转移到canvas中间
 biaopan();
 run();
 clock.restore();
 }
 setInterval(function() {
 play();
 }, 1000);

 function biaopan() {
 //绘制表盘
 clock.strokeStyle = " #9932CC";
 clock.lineWidth = 5;
 clock.beginPath();
 clock.arc(0, 0, 195, 0, 2 * Math.PI);
 clock.stroke();
 
 //刻度(小时)
 clock.strokeStyle = "#9932CC";
 clock.lineWidth = 5;
 for(var i = 0; i < 12; i++) {
  clock.beginPath();
  clock.moveTo(0, -190);
  clock.lineTo(0, -170);
  clock.stroke();
  clock.rotate(2 * Math.PI / 12);
 }
 //刻度(分钟)
 clock.strokeStyle = "#9932CC";
 clock.lineWidth = 3;
 for(var i = 0; i < 60; i++) {
  clock.beginPath();
  clock.moveTo(0, -190);
  clock.lineTo(0, -180);
  clock.stroke();
  clock.rotate(2 * Math.PI / 60);
 }
 //绘制文字
 clock.textAlign = "center";
 clock.textBaseline = "middle";
 clock.fillStyle = "#6495ED";
 clock.font = "20px 微软雅黑"
 for(var i = 1; i < 13; i++) {
  clock.fillText(i,Math.sin(2*Math.PI /12*i)*150,Math.cos(2*Math.PI/12*i)*-150);
 }
 
 }

 function run() {
 var date = new Date();
 var h = date.getHours();
 var m = date.getMinutes();
 var s = date.getSeconds();
// if(h > 12) {
//  h = h - 12;
// }
 //日期
 var week = date.getDay();
 var month = date.getMonth() + 1;
 var day = date.getDate();
 switch (week){
  case 1: week = "星期一";
  break;
  case 2: week = "星期二";
  break;
  case 3: week = "星期三";
  break;
  case 4: week = "星期四";
  break;
  case 5: week = "星期五";
  break;
  case 6: week = "星期六";
  break;
  default: week = "星期天";
  break;
 }
 clock.save();
 clock.textAlign = "center";
 clock.textBaseline = "middle";
 clock.fillStyle = "black";
 clock.font = "16px"
 clock.fillText(week,-2,-118);
 clock.fillText(month+" 月",-90,2);
 clock.fillText(day+" 号",90,0);
 clock.stroke();
 clock.restore();

 //时针
 //分针60格 分针5格 
 clock.save();
 clock.rotate(2 * Math.PI / 12 * h + (2 * Math.PI / 60 * m + 2 * Math.PI / 60 * s / 60) / 12);
 clock.strokeStyle = "black";
 clock.lineWidth = 7;
 clock.beginPath();
 clock.moveTo(0, 0);
 clock.lineTo(0, -80);
 clock.lineCap = "round";
 clock.stroke();
 clock.restore();
 //分针
 //秒针60格 分针一格
 clock.save();
 clock.beginPath();
 clock.strokeStyle = "#D2691E";
 clock.lineWidth = 5;
 clock.rotate(2 * Math.PI / 60 * m + 2 * Math.PI / 60 * s / 60);
 clock.moveTo(0, 0);
 clock.lineTo(0, -110);
 clock.lineCap = "round";
 clock.stroke();
 clock.restore();
 //秒针
 clock.strokeStyle = "red";
 clock.rotate(2 * Math.PI / 60 * s);
 clock.lineWidth = 4;
 clock.beginPath();
 clock.moveTo(0, 0);
 clock.lineTo(0, -120);
 clock.lineCap = "round";
 clock.stroke();
 //中心
 clock.fillStyle = " #CCFFFF";
 clock.lineWidth = 5;
 clock.beginPath();
 clock.arc(0, 0, 10, 0, 2 * Math.PI);
 clock.fill();
 clock.strokeStyle = "cadetblue";
 clock.stroke();
 
 }
 </script>
 </body>

</html>

更多JavaScript时钟特效点击查看：JavaScript时钟特效专题

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
DDR爱好者之家 Design By 杰米