canvas中的数学2

这次看一个有趣的效果，将"一行三角形的总个数"调至1，2时，是最让我震惊的。

https://codepen.io/xiaodun/pen/PyxoaW?editors=0010

看到代码后，发现只是因为画的方向不同，然后体现出这种错位。

image.png

填充元素的逻辑:

if(this.isStart && this.data.length == 0){
    for (var i = 0; i <= this.count; i++) {
      this.data[i] = {};
      this.data[i].x = (i / this.count) * this.width;
        if (i % 2) {
          this.data[i].y = 5;
        } else {
          this.data[i].y = this.height - 5;
         }
       }
       this.h1 = -this.height;
       this.h2 = this.height;
  }

上述数据中的i % 2只是为了y轴坐标有不同，画上面的三角形和画下面的三角形都是用同一组数据。

运动逻辑

if (this.isStart) {
   
    this.h1 += this.height / this.base1;
    this.h2 -= this.height / this.base2;
    if (this.h1 >= 0) {
      this.h1 = 0;
    }
    if (this.h2 <= 0) {
      this.h2 = 0;
    }
  } else {
    this.h1 -= this.height / 20;
    this.h2 += this.height / 20;
    if (this.h1 <= -this.height) {
      this.h1 = -this.height;
    }
    if (this.h2 >= this.height) {
      this.h2 = this.height;
    }
  }

正反向以及临界值处理，到达临界值时不再变化y轴坐标

重点是画的逻辑

this.pen.beginPath();
 this.pen.moveTo(0, -this.height);
 this.pen.clearRect(0,0,this.width,this.height);
 for(let i=0;i<this.data.length;i++){
   let item = this.data[i];
   this.pen.lineTo(item.x, item.y + this.h1);
 }
 this.pen.lineTo(this.width, -this.height);
  this.pen.closePath();
  this.pen.fill();
  this.pen.beginPath();
  
  this.pen.moveTo(0, this.height);
  for (var i = 0; i < this.data.length; i++) {
    let item = this.data[i];
    this.pen.lineTo(item.x, item.y + this.h2);
  }
  this.pen.lineTo(this.width, this.height);
  this.pen.closePath();
  this.pen.fill();

上述代码大概是这样子