h5-日食效果

Posted 2020-08-16 舍近求猿

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了h5-日食效果相关的知识，希望对你有一定的参考价值。

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         *
  8         {
  9             margin: 0;
 10             padding: 0;
 11         }
 12         #box
 13         {
 14             width: 1000px;
 15             height: 600px;
 16             margin: 50px auto;
 17             position: relative;
 18         }
 19         #can
 20         {
 21             background: #000;
 22         }
 23         #bt1,#bt2
 24         {
 25             background: #000;
 26             color: #fff;
 27             font-size: 25px;
 28             position: fixed;
 29             left:40px;
 30             border: none;
 31         }
 32         #bt1
 33         {
 34             top: 230px;
 35         }
 36         #bt2
 37         {
 38             top: 300px;
 39         }
 40         #mode
 41         {
 42             width: 200px;
 43             height: 200px;
 44             background: #000;
 45             position: absolute;
 46             -webkit-border-radius:50%;
 47             -moz-border-radius:50%;
 48             border-radius:50%;
 49             left: 620px;
 50             top: 195px;
 51         }
 52     </style>
 53 </head>
 54 <body>
 55     <div id="box">
 56         <canvas width="1000" height="600" id="can"></canvas>
 57         <div id="mode"></div>
 58     </div>
 59     <button id="bt1">start</button>
 60     <button id="bt2">stop</button>
 61 <script >
 62     var bt1=document.getElementById(\'bt1\');
 63     var bt2=document.getElementById(\'bt2\');
 64     var mode=document.getElementById(\'mode\');
 65     var can=document.getElementById(\'can\');
 66     var ctx=can.getContext(\'2d\');
 67     var time1=null;
 68     //白色
 69     ctx.beginPath();
 70     ctx.moveTo(200,200);
 71     ctx.arc(500,220,100,0,360,false);
 72     ctx.fillStyle=\'#fff\';
 73     ctx.shadowBlur=50;
 74     ctx.shadowColor=\'yellow\';
 75     ctx.fill();
 76     ctx.closePath();
 77     //黑色
 78     var x=620,y=195;
 79     var a=true,b=true;
 80     bt1.onclick=function () {
 81         clearInterval(time1);
 82         time1=setInterval(function () {
 83             console.log(x);
 84             //x轴方向
 85             if(a){
 86                 x-=3;
 87                 if (x<=168){
 88                     x=168;
 89                     a=false;
 90                 }
 91                 mode.style.left=x+"px";
 92             }else{
 93                 x+=2;
 94                 if(x>=620){
 95                     x=620;
 96                     a=true;
 97                 }
 98                 mode.style.left=x+"px";
 99             }
100             //y轴方向
101             if(b){
102                 y--;
103                 if(y<=45){
104                     y=250;
105                     b=false;
106                 }
107                 mode.style.top=y+"px";
108             }else {
109                 y++;
110                 if(y>=195)
111                 {
112                     y=195;
113                     b=true;
114                 }
115                 mode.style.top=y+"px";
116             }
117         },100)
118     };
119     bt2.onclick=function () {
120         clearInterval(time1);
121     }
122 </script>
123 </body>
124 </html>

以上是关于h5-日食效果的主要内容，如果未能解决你的问题，请参考以下文章

利用mask-image蒙层编写异形头像

炫酷 CSS 背景效果的 10 个代码片段