canvas随机气泡

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

function App() {
  let width, height;
  const canvas = document.getElementById('canvas'), context = canvas.getContext('2d');

const NUM_BUBBLES = 100;
  const bubbles = [];
  let cscale = chroma.scale([chroma.random(), chroma.random()]);

init();
 
  function init() {
    onResize();
    window.addEventListener('resize', onResize, false);

for (let i = 0; i < NUM_BUBBLES; i++) {
      initBubble(i);
    }

document.addEventListener('click', () => {
      cscale = chroma.scale([chroma.random(), chroma.random()]);
    });

animate();
  }

function initBubble(i) {
    if (!bubbles[i]) bubbles[i] = { i };

const b = bubbles[i],
      r = 1 + rnd() * 20,
      x = rnd() * width,
      dx = rnd(10, 20);

b.r = r;
    b.x = x - dx;
    b.y = height + r * 2;
    b.color = cscale(rnd()).alpha(rnd(0.1, 0.8));

function drawBubble(b) {
    context.beginPath();
    context.arc(b.x, b.y, b.r, 0, 2 * Math.PI, false);
    context.fillStyle = b.color;
    context.fill();

context.beginPath();
    context.arc(b.x, b.y, b.r + 2, 0, 2 * Math.PI, false);
    context.lineWidth = 1;
    context.strokeStyle = b.color;
    context.stroke();
  }

function animate() {
    requestAnimationFrame(animate);
    context.clearRect(0, 0, width, height);
    for (let i = 0; i < NUM_BUBBLES; i++) {
      drawBubble(bubbles[i]);
    }
  }

function onResize() {
    width = window.innerWidth;
    height = window.innerHeight;
    canvas.width = width; canvas.height = height;
  }

function rnd(min, max) {
    if (min === undefined) { min = 0; }
    if (max === undefined) { max = 1; }
    return Math.random() * (max - min) + min;
  }
}

App();

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