“Widget:用户测试邀请信”与“Widget:网站维护时间线”：页面之间的差异

H萌娘，万物皆可H的百科全书！
（页面间差异）
跳到导航 跳到搜索
imported>=海豚=
无编辑摘要
 
imported>=海豚=
无编辑摘要
 
第1行： 第1行：
<body>
<div id="wrap">
<h2>SEND A MESSAGE</h2>
<br><br><br>
<div id="form-wrap">
<form>
<p>HELLO JOE,</p>
<label for="email">Your Message:</label>
<textarea name="message" id="message" value="Your Message"></textarea>
<p>BEST,</p>
<label for="name">Name:</label>
<input type="text" name="name" value="" id="name" />
<label for="email">Email:</label>
<input type="text" name="email" value="" id="email" />
<input type="submit" name="submit" value="NOW, I SEND THANKS!" />
</form>
</div>
</div>
</body>
<style>
<style>
#wrap p{
* {
font-family: tahoma;
  margin: 0;
font-size: 24px;
}
color: #757575;
.timeline {
  height: 100%;
  position: relative;
}
}
#wrap{
.timeline canvas {
width: 530px;
  position: absolute;
margin: 20px auto 0;
  width: 100%;
height: 1000px;
  height: 100%;
  left: 0;
  top: 46px;
}
}
#wrap h2{
.timeline figcaption {
margin-bottom: 20px;
  font-weight: 400;
text-align: center;
   font-size: 24px;
font-size: 35px;
  text-transform: uppercase;
font-family: tahoma;
  -webkit-text-stroke: .25px;
color: black;
}
}
#form-wrap{
.timeline h2 {
height: 447px;
  font-weight: 400;
position: relative;
   font-size: 30px;
top: 0px;
  padding-bottom: 20px;
transition: all 1s ease-in-out .3s;
  color: #b2cde9!important;
  text-transform: uppercase;
  line-height: 1.2 !important;
}
}
#form-wrap:before{
.timeline h6 {
content: "";
  color: #0090F5!important;
position: absolute;
   font-size: 17px;
bottom: 128px;
   font-weight: 400;
left: 0px;
background: url('https://www.hmoegirl.com/images/a/a9/Before.png');
width: 530px;
height: 317px;
}
}
#form-wrap:after{
.timeline p,
content: "";
.timeline ol {
position: absolute;
  font-weight: 400;
bottom: 0px;
  padding: 3px 0 20px 0;
left: 0;
  color: #575757!important;
background: url('https://www.hmoegirl.com/images/c/c6/After.png');
  text-align: justify;
width: 530px;
  width: 70%;
height: 259px;
}
}
#form-wrap.hide:after,
.timeline ol {
#form-wrap.hide:before{
  list-style: disc;
display: none;
  margin-top: -20px;
  padding-left: 40px;
}
}
#form-wrap:hover{
.timeline figure {
height: 777px;
  float: right;
top: -200px;
  width: 100%;
}
}
#wrap form{
.timeline article {
background: url('https://www.hmoegirl.com/images/c/cf/Letter_bg.png');
  position: relative;
position: relative;
  width: 38%;
top: 200px;
  overflow: hidden;
height: 200px;
width: 400px;
margin: 0px auto;
padding: 20px;
border: 1px solid white;
border-right: 3px;
transition: all 1s ease-in-out .3s;
}
}
#form-wrap:hover form{
.timeline article:first-of-type {
height: 530px;
  float: left;
  text-align: right;
}
}
#wrap lable{
.timeline article:first-of-type p,
margin: 11px 20px 0 0;
.timeline article:first-of-type figure {
font-size: 15px;
  float: right;
color: gray;
text-transform: uppercase;
}
}
#wrap input[type=text], textarea{
.timeline article:last-of-type {
font: 14px normal uppercase, arial, serif;
  float: right;
color: dimgray;
background: none;
width: 380px;
height: 37px;
padding: 0px 10px;
margin: 0 0 10px 0;
border: 1px solid #BDBDBD;
border-radius: 5px;
}
}
#wrap textarea{
.timeline article:last-of-type h2 {
height: 80px;
  color: #c6e0aa!important;
padding-top: 14px;
}
}
#form-wrap input[type=submit]{
.timeline article:last-of-type h6,
position: relative;
.timeline article:last-of-type a {
font-family: tahoma;
  color: #40aa00!important;
font-size: 24px;
color: gray;
width: 300px;
text-align: center;
opacity: 0;
cursor: pointer;
border-radius: 3px;
transition: opacity 0.7s ease-in-out 0s;
}
}
#form-wrap:hover input[type=submit]{
.timeline article:last-of-type a:hover {
z-index: 1;
  color: #95D40D!important;
opacity: 1;
transition: opacity 0.5s ease-in-out 1.3s;
}
}
</style>
</head>
<body>
   <section id="timeline">
   <div class="timeline">
     <canvas id="cvs3"></canvas>
     <article>
       <h2>新增功能</h2>     
       <figure>
         <figcaption>Web Development</figcaption>
         <h6>With modern technologies</h6>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum pulvinar, blandit neque in, ornare libero.
         </p>
       </figure>
       <figure>
         <figcaption>Search Engine Op.</figcaption>
         <h6>With Free & Paid Plugin</h6>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum pulvinar, blandit neque in, ornare libero.
         </p>
       </figure>
       <figure>
         <figcaption>Search Engine Op.</figcaption>
         <h6>With Free & Paid Plugin</h6>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum pulvinar, blandit neque in, ornare libero.
         </p>
       </figure>
       <figure>
         <figcaption>Graphics Design</figcaption>
         <h6>using ps and all</h6>
         <p>          
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum pulvinar, blandit neque in, ornare libero.
         </p>
       </figure>
     </article>
     <article>
       <h2>修复BUG</h2>
       <figure>
         <figcaption>Mobile Friendly</figcaption>
         <h6>with touch screen</h6>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum pulvinar, blandit neque in, ornare libero.
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum pulvinar, blandit neque in, ornare libero.
         </p>
       </figure>
       <figure>
         <figcaption>Mobile Friendly</figcaption>
         <h6>with touch screen</h6>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum pulvinar, blandit neque in, ornare libero.
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum pulvinar, blandit neque in, ornare libero.
         </p>
       </figure>
             <figure>
         <figcaption>Web Design</figcaption>
         <h6>using Html CSS JS</h6>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum pulvinar, blandit neque in, ornare libero. Ut ut libero in nibh convallis sollicitudin. Maecenas ante erat, lacinia commodo pretium vel, ultricies eget nibh. Duis et felis lectus. Donec orci libero, auctor eget sodales at, euismod venenatis nibh.
         </p>
       </figure>
       <figure>
         <figcaption>Retina Ready Display</figcaption>
         <h6>Supported all devices</h6>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, molestiae, perferendis. Iusto nam libero doloribus veritatis magnam sequi error, obcaecati, porro atque quo unde iure voluptate officiis eos nostrum, sint. Corporis ipsam necessitatibus repudiandae, beatae odio perferendis provident consequuntur inventore natus deleniti asperiores animi ducimus assumenda possimus eos, cum sunt.
         </p>
       </figure>
       <figure>
         <figcaption>Retina Ready Display</figcaption>
         <h6>Supported all devices</h6>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, molestiae, perferendis. Iusto nam libero doloribus veritatis magnam sequi error, obcaecati, porro atque quo unde iure voluptate officiis eos nostrum, sint. Corporis ipsam necessitatibus repudiandae, beatae odio perferendis provident consequuntur inventore natus deleniti asperiores animi ducimus assumenda possimus eos, cum sunt.
         </p>
       </figure>
             <figure>
         <figcaption>Retina Ready Display</figcaption>
         <h6>Supported all devices</h6>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, molestiae, perferendis. Iusto nam libero doloribus veritatis magnam sequi error, obcaecati, porro atque quo unde iure voluptate officiis eos nostrum, sint. Corporis ipsam necessitatibus repudiandae, beatae odio perferendis provident consequuntur inventore natus deleniti asperiores animi ducimus assumenda possimus eos, cum sunt.
         </p>
       </figure>
     </article>
     <br style="clear:both" />
   </div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
   function Timeline(cvs) {
   var self = this,
     paused = true,
     rafid = 0,
     mouse = { x: 0, y: 0 },
     canvas = cvs,
     ctx = null;
   self.lines = [];
   self.isOK = false;
   self.options = {
     speed: 0.1,
     density: 8,
     radius: 600,
   };
   self.targets = [
  [1, 10, 20],
  [5, 25, 30]
   ];
   self.dotColors = [
     ['#13669b', 'rgba(19, 102, 155, 0.3)', 'rgba(19, 102, 155, 0.08)'],
     ['#7dd317', 'rgba(113, 222, 15, 0.3)', 'rgba(91, 164, 22, 0.12)'],
   ];
   self.isPaused = function () {
     return paused;
   };
   function InitDots() {
     var tl = $('.timeline');
     var top = tl.find('h2').outerHeight();
     self.lines[0].dots = [];
     var y = top;
     tl.find('article:first figure').each(function () {
       self.lines[0].dots.push([$(this).outerWidth() + 20, y + 20]);
       y += $(this).outerHeight();
     });
     self.lines[1].dots = [];
     var y = top;
     tl.find('article:last figure').each(function () {
       self.lines[1].dots.push([canvas.width - $(this).outerWidth() - 20, y + 20]);
       y += $(this).outerHeight();
     });
   }
   function OnResize() {
     canvas.width = canvas.offsetWidth;
     canvas.height = canvas.offsetHeight;
     var wasPaused = paused;
     self.toggle(false);
     // Init lines
     self.lines[0].reset(canvas.offsetWidth / 2 - 15);
     self.lines[1].reset(canvas.offsetWidth / 2 + 15);
     InitDots();
     self.toggle(!wasPaused);
   }
   function init() {
     var result = false;
     try {
       result = !!(canvas.getContext && (ctx = canvas.getContext('2d')));
       self.lines[0] = new Line(0, canvas.offsetHeight - 100, '#4789a3', self.options, mouse);
       self.lines[1] = new Line(0, canvas.offsetHeight - 100, '#a0d59c', self.options, mouse);
     } catch (e) {
       return false;
     }
     $(canvas).mousemove(function (e) {
       if (e.offsetX) {
         mouse.x = e.offsetX;
         mouse.y = e.offsetY;
       }
       else if (e.layerX) {
         mouse.x = e.layerX;
         mouse.y = e.layerY;
       }
       else {
         mouse.x = e.pageX - $(canvas).offset().left;
         mouse.y = e.pageY - $(canvas).offset().top;
       }
     });
     $(window).resize(OnResize);
     OnResize();
     return result;
   }
   function Line(y, height, color, options, mouse) {
     var self = this;
     self.color = color;
     self.options = options;
     self.mouse = mouse;
     self.height = height;
     self.dots = [];
     self.y = y;
     self.points = [];
     self.reset = function (x, f) {
       self.points = [];
       for (var y = self.y; y < self.height; y += self.options.density)
         self.points.push(new Point(x, y, self.color));
     }
     self.update = function () {
       for (var i = 0; i < self.points.length; i++)
         self.points[i].update(self.mouse, self.options);
     }
     function Point(x, y) {
       this.y = y;
       this.x = x;
       this.base = { x: x, y: y };
       this.update = function (mouse, options) {
         var dx = this.x - mouse.x,
           dy = this.y - mouse.y,
           alpha = Math.atan2(dx, dy),
           alpha = (alpha > 0 ? alpha : 2 * Math.PI + alpha),
           d = options.radius / Math.sqrt(dx * dx + dy * dy);
         this.y += Math.cos(alpha) * d + (this.base.y - this.y) * options.speed;
         this.x += Math.sin(alpha) * d + (this.base.x - this.x) * options.speed;
       }
     }
   }
   function drawCircle(p, r, color) {
     ctx.fillStyle = color;
     ctx.beginPath();
     ctx.arc(p.x, p.y, r, 0, 2 * Math.PI, true);
     ctx.closePath();
     ctx.fill();
   }
   function drawLine(p1, p2) {
     ctx.beginPath();
     ctx.moveTo(p1.x, p1.y);
     ctx.lineTo(p2.x, p2.y);
     ctx.stroke();
     ctx.closePath();
   }
   function redraw() {
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     for (var i = 0; i < 2; i++) {
       var points = self.lines[i].points;
       ctx.beginPath();
       ctx.lineWidth = 2;
       ctx.strokeStyle = self.lines[i].color;
       ctx.moveTo(points[15].x, points[15].y);
       for (var j = 15; j < points.length - 2; j++) {
         var point = points[j];
         var xc = (points[j + 1].x + point.x) / 2;
         var yc = (points[j + 1].y + point.y) / 2;


</style>
         ctx.quadraticCurveTo(point.x, point.y, xc, yc);
       }
       ctx.stroke();
       ctx.closePath();
 
 
       // Dots
       ctx.lineWidth = 1.2;
       ctx.strokeStyle = self.dotColors[i][2];
       for (var j = 0; j < self.lines[i].dots.length; j++) {
         var dot = self.lines[i].dots[j],
           id = self.targets[i][j];
           dot2 = [
             (self.lines[i].points[id].x + self.lines[i].points[id + 1].x) / 2,
             (self.lines[i].points[id].y + self.lines[i].points[id + 1].y) / 2,
           ];
 
         var p1 = { x: dot[0], y: dot[1] };
         var p2 = { x: dot2[0], y: dot2[1] };
 
 
         drawLine(p1, p2);
         drawCircle(p1, 4, self.dotColors[i][0]);
 
         drawCircle(p2, 11, self.dotColors[i][1]);
         drawCircle(p2, 5.5, self.dotColors[i][0]);
       }
     }
   }
 
   function animate() {
     rafid = requestAnimationFrame(animate);
 
     self.lines[0].update();
     self.lines[1].update();
 
     redraw();
   }
 
   self.toggle = function (run) {
     if (!self.isOK) return false;
 
     if (run === undefined)
       self.toggle(!paused);
 
     else if (!!run && paused) {
       paused = false;
       animate();
     }
     else if (!!!run) {
       paused = true;
       cancelAnimationFrame(rafid);
     }
     return true;
   }
 
 
   self.isOK = init();
}
new Timeline($('#cvs3').get(0)).toggle(true);
</script>

2021年8月13日 (五) 22:08的版本

<style>

  • {
 margin: 0;

} .timeline { 

 height: 100%;
 position: relative;

} .timeline canvas { 

 position: absolute;
 width: 100%;
 height: 100%;
 left: 0;
 top: 46px;

} .timeline figcaption { 

 font-weight: 400;
   font-size: 24px;
 text-transform: uppercase;
 -webkit-text-stroke: .25px;

} .timeline h2 { 

 font-weight: 400;
   font-size: 30px;
 padding-bottom: 20px;
 color: #b2cde9!important;
  text-transform: uppercase;
  line-height: 1.2 !important;

} .timeline h6 { 

 color: #0090F5!important;
   font-size: 17px;
   font-weight: 400;

} .timeline p, .timeline ol { 

 font-weight: 400;
 padding: 3px 0 20px 0;
 color: #575757!important;
 text-align: justify;
 width: 70%;

} .timeline ol { 

 list-style: disc;
 margin-top: -20px;
 padding-left: 40px;

} .timeline figure { 

 float: right;
 width: 100%;

} .timeline article { 

 position: relative;
 width: 38%;
 overflow: hidden;

} .timeline article:first-of-type { 

 float: left;
 text-align: right;

} .timeline article:first-of-type p, .timeline article:first-of-type figure { 

 float: right;

} .timeline article:last-of-type { 

 float: right;

} .timeline article:last-of-type h2 { 

 color: #c6e0aa!important;

} .timeline article:last-of-type h6, .timeline article:last-of-type a { 

 color: #40aa00!important;

} .timeline article:last-of-type a:hover { 

 color: #95D40D!important;

} </style> </head> <body> 

   <section id="timeline">

       <canvas id="cvs3"></canvas>
       <article>

新增功能

           <figure>
               <figcaption>Web Development</figcaption>
With modern technologies

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum pulvinar, blandit neque in, ornare libero. 

           </figure>
           <figure>
               <figcaption>Search Engine Op.</figcaption>
With Free & Paid Plugin

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum pulvinar, blandit neque in, ornare libero. 

           </figure>
            <figure>
               <figcaption>Search Engine Op.</figcaption>
With Free & Paid Plugin

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum pulvinar, blandit neque in, ornare libero. 

           </figure>
           <figure>
               <figcaption>Graphics Design</figcaption>
using ps and all

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum pulvinar, blandit neque in, ornare libero. 

           </figure>
       </article>

       <article>

修复BUG

           <figure>
               <figcaption>Mobile Friendly</figcaption>
with touch screen

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum pulvinar, blandit neque in, ornare libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum pulvinar, blandit neque in, ornare libero. 

           </figure>
           <figure>
               <figcaption>Mobile Friendly</figcaption>
with touch screen

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum pulvinar, blandit neque in, ornare libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum pulvinar, blandit neque in, ornare libero. 

           </figure>
                       <figure>
               <figcaption>Web Design</figcaption>
using Html CSS JS

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum pulvinar, blandit neque in, ornare libero. Ut ut libero in nibh convallis sollicitudin. Maecenas ante erat, lacinia commodo pretium vel, ultricies eget nibh. Duis et felis lectus. Donec orci libero, auctor eget sodales at, euismod venenatis nibh. 

           </figure>
           <figure>
               <figcaption>Retina Ready Display</figcaption>
Supported all devices

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, molestiae, perferendis. Iusto nam libero doloribus veritatis magnam sequi error, obcaecati, porro atque quo unde iure voluptate officiis eos nostrum, sint. Corporis ipsam necessitatibus repudiandae, beatae odio perferendis provident consequuntur inventore natus deleniti asperiores animi ducimus assumenda possimus eos, cum sunt. 

           </figure>
           <figure>
               <figcaption>Retina Ready Display</figcaption>
Supported all devices

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, molestiae, perferendis. Iusto nam libero doloribus veritatis magnam sequi error, obcaecati, porro atque quo unde iure voluptate officiis eos nostrum, sint. Corporis ipsam necessitatibus repudiandae, beatae odio perferendis provident consequuntur inventore natus deleniti asperiores animi ducimus assumenda possimus eos, cum sunt. 

           </figure>
                       <figure>
               <figcaption>Retina Ready Display</figcaption>
Supported all devices

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, molestiae, perferendis. Iusto nam libero doloribus veritatis magnam sequi error, obcaecati, porro atque quo unde iure voluptate officiis eos nostrum, sint. Corporis ipsam necessitatibus repudiandae, beatae odio perferendis provident consequuntur inventore natus deleniti asperiores animi ducimus assumenda possimus eos, cum sunt. 

           </figure>
       </article>

</section> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script> 

   function Timeline(cvs) {

   var self = this,
       paused = true,
       rafid = 0,
       mouse = { x: 0, y: 0 },
       canvas = cvs,
       ctx = null;

   self.lines = [];

   self.isOK = false;
   self.options = {
       speed: 0.1,
       density: 8,
       radius: 600,
   };
   self.targets = [
  [1, 10, 20],
  [5, 25, 30]
   ];
   self.dotColors = [
       ['#13669b', 'rgba(19, 102, 155, 0.3)', 'rgba(19, 102, 155, 0.08)'],
       ['#7dd317', 'rgba(113, 222, 15, 0.3)', 'rgba(91, 164, 22, 0.12)'],
   ];

   self.isPaused = function () {
       return paused;
   };

   function InitDots() {
       var tl = $('.timeline');
       var top = tl.find('h2').outerHeight();

       self.lines[0].dots = [];
       var y = top;
       tl.find('article:first figure').each(function () {

           self.lines[0].dots.push([$(this).outerWidth() + 20, y + 20]);

           y += $(this).outerHeight();
       });

       self.lines[1].dots = [];
       var y = top;
       tl.find('article:last figure').each(function () {

           self.lines[1].dots.push([canvas.width - $(this).outerWidth() - 20, y + 20]);

           y += $(this).outerHeight();
       });
   }

   function OnResize() {
       canvas.width = canvas.offsetWidth;
       canvas.height = canvas.offsetHeight;

       var wasPaused = paused;
       self.toggle(false);
       // Init lines
       self.lines[0].reset(canvas.offsetWidth / 2 - 15);
       self.lines[1].reset(canvas.offsetWidth / 2 + 15);

       InitDots();

       self.toggle(!wasPaused);
   }

   function init() {
       var result = false;
       try {
           result = !!(canvas.getContext && (ctx = canvas.getContext('2d')));

           self.lines[0] = new Line(0, canvas.offsetHeight - 100, '#4789a3', self.options, mouse);
           self.lines[1] = new Line(0, canvas.offsetHeight - 100, '#a0d59c', self.options, mouse);

       } catch (e) {
           return false;
       }

       $(canvas).mousemove(function (e) {

           if (e.offsetX) {
               mouse.x = e.offsetX;
               mouse.y = e.offsetY;
           }
           else if (e.layerX) {
               mouse.x = e.layerX;
               mouse.y = e.layerY;
           }
           else {
               mouse.x = e.pageX - $(canvas).offset().left;
               mouse.y = e.pageY - $(canvas).offset().top;
           }
       });

       $(window).resize(OnResize);

       OnResize();

       return result;
   }

   function Line(y, height, color, options, mouse) {
       var self = this;

       self.color = color;
       self.options = options;
       self.mouse = mouse;
       self.height = height;
       self.dots = [];
       self.y = y;

       self.points = [];

       self.reset = function (x, f) {
           self.points = [];
           for (var y = self.y; y < self.height; y += self.options.density)
               self.points.push(new Point(x, y, self.color));
       }

       self.update = function () {
           for (var i = 0; i < self.points.length; i++)
               self.points[i].update(self.mouse, self.options);
       }

       function Point(x, y) {
           this.y = y;
           this.x = x;
           this.base = { x: x, y: y };

           this.update = function (mouse, options) {
               var dx = this.x - mouse.x,
                   dy = this.y - mouse.y,
                   alpha = Math.atan2(dx, dy),
                   alpha = (alpha > 0 ? alpha : 2 * Math.PI + alpha),
                   d = options.radius / Math.sqrt(dx * dx + dy * dy);

               this.y += Math.cos(alpha) * d + (this.base.y - this.y) * options.speed;
               this.x += Math.sin(alpha) * d + (this.base.x - this.x) * options.speed;
           }
       }
   }

   function drawCircle(p, r, color) {
       ctx.fillStyle = color;
       ctx.beginPath();
       ctx.arc(p.x, p.y, r, 0, 2 * Math.PI, true);
       ctx.closePath();
       ctx.fill();
   }

   function drawLine(p1, p2) {
       ctx.beginPath();
       ctx.moveTo(p1.x, p1.y);
       ctx.lineTo(p2.x, p2.y);
       ctx.stroke();
       ctx.closePath();
   }

   function redraw() {
       ctx.clearRect(0, 0, canvas.width, canvas.height);

       for (var i = 0; i < 2; i++) {
           var points = self.lines[i].points;

           ctx.beginPath();
           ctx.lineWidth = 2;
           ctx.strokeStyle = self.lines[i].color;
           ctx.moveTo(points[15].x, points[15].y);

           for (var j = 15; j < points.length - 2; j++) {
               var point = points[j];

               var xc = (points[j + 1].x + point.x) / 2;
               var yc = (points[j + 1].y + point.y) / 2;



               ctx.quadraticCurveTo(point.x, point.y, xc, yc);
           }
           ctx.stroke();
           ctx.closePath();



           // Dots
           ctx.lineWidth = 1.2;
           ctx.strokeStyle = self.dotColors[i][2];
           for (var j = 0; j < self.lines[i].dots.length; j++) {
               var dot = self.lines[i].dots[j],
                   id = self.targets[i][j];
                   dot2 = [
                       (self.lines[i].points[id].x + self.lines[i].points[id + 1].x) / 2,
                       (self.lines[i].points[id].y + self.lines[i].points[id + 1].y) / 2,
                   ];

               var p1 = { x: dot[0], y: dot[1] };
               var p2 = { x: dot2[0], y: dot2[1] };



               drawLine(p1, p2);
               drawCircle(p1, 4, self.dotColors[i][0]);

               drawCircle(p2, 11, self.dotColors[i][1]);
               drawCircle(p2, 5.5, self.dotColors[i][0]);
           }
       }
   }

   function animate() {
       rafid = requestAnimationFrame(animate);

       self.lines[0].update();
       self.lines[1].update();

       redraw();
   }

   self.toggle = function (run) {
       if (!self.isOK) return false;

       if (run === undefined)
           self.toggle(!paused);

       else if (!!run && paused) {
           paused = false;
           animate();
       }
       else if (!!!run) {
           paused = true;
           cancelAnimationFrame(rafid);
       }
       return true;
   }



   self.isOK = init();

} new Timeline($('#cvs3').get(0)).toggle(true); </script>

取自“https://hmoegirl.com/index.php?title=Widget:用户测试邀请信&oldid=59370”