canvas彩虹漩涡

下载代码

html

css

js

分享到微信朋友圈

X

html

css

JavaScript

let canvas;
let ctx;
let w, h;

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;
  ctx.lineWidth = 4;
}

function draw() {
  let hueOffset = Math.random() * 360;
  ctx.fillRect(0, 0, w, h);
  let nrOfLines = 2500;
  let deltaAngle = Math.PI * 2 / nrOfLines;
  ctx.save();
  ctx.translate(w/2, h/2);
  let a = w / 2;
  let b = h / 2;
  let c = Math.sqrt(a * a + b * b) * 1.05;
  for(let i = 0; i< nrOfLines; i++) {
    let angle = i * deltaAngle;
    let x = Math.cos(angle) * c;
    let y = Math.sin(angle) * c;
    let cp1x = Math.cos(angle+1.6) * c * 0.15;
    let cp1y = Math.sin(angle+1.6) * c * 0.15; 
    let cp2x = Math.cos(angle+0.5) * c * 0.65; 
    let cp2y = Math.sin(angle+0.5) * c * 0.65; 
    let hue = 180 * angle / Math.PI + hueOffset;
    let l = Math.random() * 40 + 40;
    ctx.strokeStyle = `hsla(${hue}, 90%, ${l}%, 0.6)`;
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
    ctx.stroke();
  }
  ctx.restore();
}

setup();
draw();

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

<!doctype html> <html> <head> <meta charset="utf-8"> <title>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号