HTML5 Canvas蒲公英特效代码下载


HTML5 Canvas蒲公英特效代码下载
HTML5 Canvas蒲公英特效代码下载以及Canvas蒲公英等js/jquery网页特效代码下载。

1. HTML代码

<canvas id="canvas"></canvas>
<script>
class Circle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.r = 3;
  }
  draw() {
    let nrOfPoints = Math.round(this.r * 0.2 + 3);
    let deltaAngle = Math.PI * 2 / nrOfPoints;
    for(let i = 0; i < nrOfPoints; i += 1) {
      let angle = i * deltaAngle;
      let r = Math.random() * this.r * 0.32 + this.r * 0.63;
      let x = Math.cos(angle) * r;
      let y = Math.sin(angle) * r;
      let x2 = this.x + x;
      let y2 = this.y + y;
      ctx.beginPath();
      ctx.moveTo(this.x, this.y);
      ctx.lineTo(x2, y2);
      ctx.stroke();
      ctx.beginPath();
      ctx.arc(x2, y2, 4, 0, Math.PI * 2);
      ctx.fill();
    }
  }
}
let canvas;
let ctx;
let w, h;
let circles;
function setup() {
  canvas = document.querySelector("#canvas");
  ctx = canvas.getContext("2d");
  reset();
  window.addEventListener("resize", () => {
    reset();
    draw();
  });
  canvas.addEventListener("click", draw);
}
function reset() {
  w = canvas.width = window.innerWidth;
  h = canvas.height = window.innerHeight;
}
function clear() {
  ctx.fillStyle = "#224";
  ctx.fillRect(0, 0, w, h);
  ctx.fillStyle = "#0ff";
  ctx.strokeStyle = "#0ff";
  ctx.lineWidth = 2;
}
function dist(x1, y1, x2, y2) {
  let xDiff = x1 - x2;
  let yDiff = y1 - y2;
  return Math.sqrt(xDiff * xDiff + yDiff * yDiff);
}
function addCircles() {
  let nrOfTries = 0;
  let wasAdded;
  do {
    wasAdded = false;
    let x = Math.random() * w;
    let y = Math.random() * h;
    if(validPos(x, y)) {
      wasAdded = true;
      let c = new Circle(x, y);
      circles.push(c);
    }
    nrOfTries++;
  } while (!wasAdded && nrOfTries < 100)
}
function validPos(x, y) {
  for(let i = 0; i < circles.length; i++) {
    let current = circles[i];
    let d = dist(x, y, current.x, current.y);
    if(d - 14 < current.r) {
      return false;
    }
  }
  return true;
}
function canGrow(circle) {
  for(let i = 0; i < circles.length; i++) {
    let current = circles[i];
    if(circle !== current) {
      let d = dist(circle.x, circle.y, current.x, current.y);
      if(d - 2 <= circle.r + current.r) {
        return false;
      } 
    }
  }
  return true;
}
function resetCircles() {
  circles = [];
}
function packCircles() {
  let nrOfTries = w * h / 300;
  for(let i = 0; i < nrOfTries; i++) {
    if(i % 5 === 0) {
      addCircles();
    }
    circles.forEach(c => {
      if(canGrow(c)) {
        c.r += 2;
      }
    });
  }
}
function drawCircles() {
  circles.forEach(c => c.draw());
}
function draw() {
  clear();
  resetCircles();
  packCircles();
  drawCircles();
}
setup();
draw();
</script>

相关推荐

发表评论

相关文章