canvas虚拟点

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

"use strict";

let a = document.getElementById("c"),
  b = a.getContext("2d"),
  c,
  d,
  e = [400, 200],
  g = [400, 100],
  h = [200, 150],
  k = 0,
  l = true;

onWindowResize();

const m = [5, 5],
  n = [5, 5],
  o = [5, 5];

function move() {
  for (let j = 0; j < e.length; j++) {
    e[j] += n[j];
    g[j] += o[j];
    if (e[j] - h[j] < 0) n[j] = m[j];
    if (e[j] + h[j] > c) n[j] = -m[j];
    if (g[j] - h[j] < 0) o[j] = m[j];
    if (g[j] + h[j] > d) o[j] = -m[j];
  }
}

let mousedown = false ;
document.body.onmousedown = function() {
  mousedown = true ;
  l = !l;
};

document.body.onmouseleave = function(){
  l = !l;
}

document.body.onclick = function(f) {
  e.push(f.layerX);
  g.push(f.layerY);
  h.push(100);
  n.push(5);
  o.push(5);
  m.push(5);
  l = !l;
};

window.addEventListener("resize", onWindowResize, false);

function onWindowResize(event) {
  c = a.width = window.innerWidth;
  d = a.height = window.innerHeight;
}

let request; // in case we want to cancel
animate();
function animate() {
  request = requestAnimationFrame(animate);
  move() ;
  draw();
}

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