canvas方形折叠层次背景效果
代码语言:html
所属分类:背景
代码描述:canvas方形折叠层次背景效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body, html { margin: 0; } canvas { display: block; cursor: pointer; } </style> </head> <body translate="no"> <canvas id="canvas"></canvas> <script> /* Johan Karlsson, 2020 https://twitter.com/DonKarlssonSan MIT License, see Details View */ 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(); }); canvas.addEventListener("click", draw); setupColors(); } function reset() { w = canvas.width = window.innerWidth; h = canvas.height = window.innerHeight; } function draw() { let colorTheme = getRandomColorTheme(); ctx.fillRect(0, 0, w, h); let size = 300; let diag = Math.sqrt(size*size*2); let nrOfColumns = Math.round(w / diag * 2) + 1; let nrOfRows = Math.round(h / diag * 4) + 2; for(let row = 0; row < nrOfRows; row++) { let y = row * diag/4; for(let col = 0; col < nrOfColumns; col++) { let x = col * diag/2; let xOffset = row % 2 * diag/4; drawRects(x + xOffset, y, size, colorTheme); } } } function setupColors() { colors = [ //https://coolors.co/app/000000-ffffff-494949-7c7a7a-ff5d73 [ "#000000", "#ffffff", .........完整代码请登录后点击上方下载按钮下载查看
网友评论0