深圳市金黑网络技术有限公司始终坚持以用户需求为导向，提供安全、稳定、高效的产品和服务！
签到 · 搜索导航 · 服务热线 · 微信/手机：17817817816

深圳网站建设

搜索
应用资源 › 应用资源下载 › 网页特效 › 时间特效代码 › js特效画布时钟代码分享
返回列表 发新帖
查看: 1120|回复: 0

js特效画布时钟代码分享

[复制链接]
admin

UID
1
贡献
844
金币
1540
主题
520
在线时间
333 小时
注册时间
2022-1-15
最后登录
2024-11-12
QQ
发表于 2022-1-30 21:50:07 | 1120 | 0 | 显示全部楼层 |阅读模式
admin 2022-1-30 21:50:07 1120 0 显示全部楼层
js特效画布时钟代码分享
看下代码运行效果图：

js特效画布时钟代码分享

js特效画布时钟代码分享

html代码如下：
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
  4. </head>
  5. <body>
  6. <div class="canvas"></div>
复制代码
javascript代码如下：
  1. <script type="text/javascript" language="javascript">
  2. window.onload=function () {
  3.     // 创建画布
  4.     var canvas=document.createElement('canvas');
  5.     var brush=canvas.getContext("2d");
  6.         canvas.style.border="2px solid #aaaaaa";
  7.         canvas.width=700;
  8.         canvas.height=700;

  10.     // 包裹画布居中
  11.     var box=document.createElement('div');
  12.         // box样式
  13.         box.style.width=canvas.width+"px";
  14.         box.style.height=canvas.height+"px";
  15.         box.style.margin="100px auto";

  17.     // 移动块
  18.     var move=document.createElement('span');
  19.         // move样式
  20.         move.style.color="#ff0000";
  21.         move.style.position="absolute";
  22.         move.style.display="none";
  23.         move.style.boxShadow="1px 1px 8px red";

  25.     // 添加对象
  26.     document.body.appendChild(box);
  27.     document.body.appendChild(move);
  28.     box.appendChild(canvas);

  30.         // 避免重复获取画布大小
  31.         var x=canvas.offsetLeft;
  32.         var y=canvas.offsetTop;
  33.         move.style.display="none";

  35.     function mymove (event) {
  36.         move.style.display="block";
  37.         move.style.left=event.clientX-50+"px";
  38.         move.style.top=event.clientY-50+"px";
  39.         move.innerHTML="当前画布坐标："+(event.clientX-x-2)+","+(event.clientY-y-2);
  40.     }

  42.     function myout () {
  43.             move.style.display="none";
  44.     }

  46.     canvas.onmousemove=mymove;
  47.     canvas.onmouseout=myout;

  49. // ---------------------------伞-------------------------------
  50.          
  51. //        var mycolor=["#FF0000","#FF7F00","#FFFF00","#00FF00","#00FFFF","#0000FF","#871F78"];
  52.         var mycolor=["#8cc540","#009f5d","#019fa0","#019fde","#007cdc","#887ddd","#cd7bdd","#ff5675",
  53.                                 "#ff1244","#ff8345","#f8bd0b","#d1d2d4"];
  54.         brush.translate(350,350);
  55.         var i=0;
  56.         function ful () {
  57.                 brush.save();
  58.                 brush.rotate(Math.PI/180*(360/12*i))
  59.         // 伞帽子                     
  60.         brush.beginPath();
  61.         brush.fillStyle=mycolor[i];
  62.         brush.arc(0,-290,40,0,Math.PI,true);
  63.         brush.fill();
  64.         // 伞柄
  65.         brush.beginPath();
  66.         brush.lineWidth=2;
  67.         brush.lineCap="round";
  68.         brush.strokeStyle=mycolor[i];
  69.         brush.moveTo(0,-290);
  70.         brush.lineTo(0,-240);
  71.         brush.arc(-10,-240,10,0,Math.PI,false);
  72.         brush.stroke();
  73.                 brush.restore();
  74.                 i++;
  75.                 if (i==mycolor.length) {
  76.                         clearInterval(timer_ful);
  77.                 }
  78.         }
  79.         var timer_ful=setInterval(ful,500);
  80.          
  81. // ---------------------------时钟-------------------------------
  82.          
  83.          
  84.         var grd=brush.createRadialGradient(0,0,1,0,0,12);
  85.         var mydeg=Math.PI/180;
  86.         function bell() {
  87.                 var mytime=new Date();//获取时间对象
  88.                 var h=mytime.getHours();//时钟
  89.                 var m=mytime.getMinutes();//分钟
  90.                 var s=mytime.getSeconds();//秒钟
  91. //                console.log(h+":"+m+":"+s);
  92.                 h=h>12?h-12:h;//24小时制转换
  93.                  
  94.                 brush.clearRect(-180,-180,360,360);//清除
  95.                 brush.save();//保存环境
  96. //                表盘
  97.                 brush.beginPath();
  98.                 brush.strokeStyle=mycolor[parseInt(s/5)];
  99.                 brush.lineWidth=10;
  100.                 brush.arc(0,0,170,0,Math.PI*2);
  101.                 brush.stroke();

  103. //                刻度
  104.                 for (var i=0;i<60;i++) {        
  105.                         brush.rotate(mydeg*6);
  106.                         brush.beginPath();
  107.                         brush.lineCap="round";
  108.                         brush.lineWidth=5;
  109.                         brush.moveTo(0,-165);
  110.                         brush.lineTo(0,-155);
  111.                         brush.stroke();        
  112.                 }
  113.                 for (var i=0;i<12;i++) {
  114.                         brush.rotate(mydeg*30);
  115.                         brush.beginPath();
  116.                         brush.lineCap="round";
  117.                         brush.lineWidth=10;
  118.                         brush.moveTo(0,-165);
  119.                         brush.lineTo(0,-145);
  120.                         brush.stroke();
  121.                 }
  122.                 for (var i=0;i<12;i++) {
  123.                         var myfont=i+1;
  124.                         brush.rotate(mydeg*30);
  125.                         brush.beginPath();
  126.                         brush.fillStyle=mycolor[i];
  127.                         brush.font="15px 楷体";
  128.                         brush.fillText(myfont,-7,-120);
  129.                 }
  130. //                时
  131.                 brush.save();
  132.                 brush.rotate(mydeg*h*30);
  133.                 brush.strokeStyle=mycolor[h];
  134.                 brush.lineWidth=6;
  135.                 brush.beginPath();
  136.                 brush.moveTo(0,20);
  137.                 brush.lineTo(0,-80);
  138.                 brush.stroke();
  139.                 brush.restore();
  140. //                秒
  141.                 brush.save();
  142.                 brush.rotate(mydeg*s*6);
  143.                 brush.strokeStyle=mycolor[parseInt(s/5)];
  144.                 brush.lineWidth=3;
  145.                 brush.beginPath();
  146.                 brush.moveTo(0,20);
  147.                 brush.lineTo(0,-130);
  148.                 brush.stroke();
  149.                 brush.restore();
  150. //                分
  151.                 brush.save();
  152.                 brush.rotate(mydeg*m*6);
  153.                 brush.strokeStyle=mycolor[parseInt(m/5)];
  154.                 brush.lineWidth=5;
  155.                 brush.beginPath();
  156.                 brush.moveTo(0,20);
  157.                 brush.lineTo(0,-100);
  158.                 brush.stroke();
  159.                 brush.restore();
  160. //                表芯
  161.                 brush.beginPath();
  162.                 grd.addColorStop(0,"#ffffff");
  163.             grd.addColorStop(1,"#ff0000");
  164.                 brush.fillStyle=grd;
  165.                 brush.arc(0,0,12,0,Math.PI*2);
  166.                 brush.fill();
  167.         }
  168.         bell();
  169.          
  170.         var timer_bell=setInterval(bell,1000);
  171.          
  172.          
  173.          
  174. }
  175. </script>
复制代码
懒人附件下载：
1.zip (1.85 KB, 下载次数: 83)

js特效, 网页特效, 时钟特效, 画布特效
楼主热帖

相关帖子
回复

举报

返回列表 发新帖
Copyright © 2013-2023 深圳市金黑网络技术有限公司 版权所有    备案号：粤ICP备2021124338号    粤公网安备 44030702003689号

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

快速回复 返回顶部 返回列表