canvas蒲公英

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

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);
}

setup();
draw();

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg