canvas像素排斥

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

const canvas = document.querySelector("canvas");
const context = canvas.getContext("2d");
const img = document.querySelector("img");

let built = false;
let pixels = [];
const config = {
  strength: 2000,
  easeFactor: 0.1,
  glow: true,
  stats: false,
  pxSize: 15
};
const mousePosition = { x: 0, y: 0 };

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

function draw() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  stats.begin();
  if (!built) {
    this.buildPixelData();
  }

for (let i = 0; i < pixels.length; i++) {
    const pixel = pixels[i];
    const deltaX = pixel.x - mousePosition.x;
    const deltaY = pixel.y - mousePosition.y;
    const angle = Math.atan2(deltaY, deltaX);
    let distance =
      config.strength / Math.sqrt(deltaX * deltaX + deltaY * deltaY);

if (config.glow) {
      pixel.r += distance;
      pixel.g += distance;
      pixel.b += distance;
      pixel.r += (pixel.or - pixel.r) * config.easeFactor;
      pixel.g += (pixel.og - pixel.g) * config.easeFactor;
      pixel.b += (pixel.ob - pixel.b) * config.easeFactor;
      context.fillStyle = `rgb(${pixel.r}, ${pixel.g}, ${pixel.b})`;
    } else {
      context.fillStyle = `rgb(${pixel.or}, ${pixel.og}, ${pixel.ob})`;
    }

pixel.x += Math.cos(angle) * distance;
    pixel.y += Math.sin(angle) * distance;
    pixel.x += (pixel.ox - pixel.x) * config.easeFactor;
    pixel.y += (pixel.oy - pixel.y) * config.easeFactor;

context.beginPath();
    context.arc(pixel.x, pixel.y, pixel.size / 2, 0, Math.PI * 2);
    context.fill();
  }
  stats.end();
  window.requestAnimationFrame(draw);
}

function onMouseMove(event) {
  mousePosition.x = event.clientX;
  mousePosition.y = event.clientY;
}

function touchMoveHandler(event) {
  mousePosition.x = event.touches[0].clientX;
  mousePosition.y = event.touches[0].clientY;
}

const stats = new Stats();
stats.showPanel(0);

window.addEventListener("DOMContentLoaded", event => {
  buildGUI();
  resize();
  window.addEventListener("mousemove", onMouseMove);
  window.addEventListener("touchmove", touchMoveHandler);
  window.addEventListener("resize", resize);
  window.requestAnimationFrame(draw);
});

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