canvas生成锯齿状背景

下载代码

html

css

js

分享到微信朋友圈

X

html

css

JavaScript

let canvas;
let ctx;
let w, h
let colors;

function setup() {
  canvas = document.querySelector("#canvas");
  ctx = canvas.getContext("2d");
  reset();
  window.addEventListener("resize", () => {
    reset();
    draw();
  });
  setupColors();
}

function reset() {
  w = canvas.width = window.innerWidth;
  h = canvas.height = window.innerHeight;
  ctx.shadowColor = "black";
  ctx.shadowBlur = 30;
  ctx.shadowOffsetX = 3;
  ctx.shadowOffsetY = 5;
}

function setupColors() {
  // Colors from:
  // https://coolors.co/26547c-ef476f-ffd166-06d6a0-fcfcfc
  colors = [
    "#26547c",
    "#ef476f",
    "#ffd166",
    "#06d6a0",
    "#fcfcfc",
  ];
}

function draw() {
  ctx.fillRect(0, 0, w, h);
  ctx.lineWidth = 40;
  let xStep = 120;
  let nrOfSteps = Math.ceil(w / xStep) + 2;
  let yStep = 50;
  let nrOfStepsY = Math.ceil(h / yStep) + 1;
  for(let y = nrOfStepsY + 5; y > -5; y -= 1) {
    ctx.beginPath();
    ctx.strokeStyle = colors[Math.abs(y) % 5];
    for(let x = -1; x < nrOfSteps; x += 1) {
      let y1 = (Math.abs(x) % 2) * xStep;
      ctx.lineTo(x * xStep, y*yStep + y1);
    }
    ctx.stroke();
  }
  let counter = 0;
  for(let x = 0; x < w; x += xStep / 4) {
    let image = ctx.getImageData(x, 0, xStep / 4, h);
    let a = counter % 8;
    let b = 7 - counter % 8;
    let yOffset = (-Math.min(a, b) -1) * yStep;
    ctx.putImageData(image, x, yOffset);
    counter++;
  }
  let image = ctx.getImageData(0, 0, w, yStep * 10);
  ctx.putImageData(image, 0, yStep * 5);
}

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号