JavaScript Canvas

下载代码

html

css

js

分享到微信朋友圈

X

html

css

JavaScript

var w, m, c, C, W, H, HW, HH, r, diameter;

var a = function () {
  document
    .getElementsByTagName("body")[0]
    .appendChild(document.createElement("canvas"));
  w = window;
  m = Math;
  c = document.getElementsByTagName("canvas")[0];
  c.style.background = 'black';
  C = c.getContext("2d");
};

var b = function () {
  W = c.width = w.innerWidth;
  H = c.height = w.innerHeight;
  HW = W / 2;
  HH = H / 2;
  diameter = 20;
};

var f = function (t) {
  t /= 3000;
  C.clearRect(0, 0, W, H);
  C.globalCompositeOperation = 'lighter';
  for (var k = 0; k < 3; k++) {
    if (k === 0) C.fillStyle = '#FF0000';
    if (k === 1) C.fillStyle = '#00FF00';
    if (k === 2) C.fillStyle = '#0000FF';
    for (i = 0; i < H; i += diameter) {
      for (j = 0; j < W / 2; j += diameter) {
        var index = i * W + j;
        C.globalAlpha = m.tan(index * index - t);
        C.fillRect(
          m.tan(i * j - m.sin(index + k / 100) + t) * j + HW - diameter / 2,
          i,
          m.tan(index + i / j + t + k / 100) / 2 * diameter / 2,
          m.tan(index * index - t) * diameter / 2
        );
      }
    }
  }
  r = requestAnimationFrame(f);
};

window.onload = function () {
  a();
  b();
  f();
  w.onresize = function () {
    cancelAnimationFrame(r);
    b();
    f();
  };
};

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

<!doctype html> <html> <head> <meta charset="utf-8"> <title>JavaScript Canvas-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号