js实现一个canvas彩色线条绘制正方形动画效果代码
代码语言:html
所属分类:动画
代码描述:js实现一个canvas彩色线条绘制正方形动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; } html, body { height: 100%; width: 100%; font-family: serif; overflow: hidden; position: relative; } canvas { display: block; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: -1; background: #000; } </style> </head> <body> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script> <script type="module"> import { Ease } from '//repo.bfw.wiki/bfwrepo/js/canvas2d/ease.js'; import { Utils } from '//repo.bfw.wiki/bfwrepo/js/canvas2d/utilities.js'; let gui, canvas, c, width, height, frameSize, id, ease, shapes, size, scale, num, maxDist, hexPoints; const setupGui = () => { gui = new dat.GUI(); gui.params = { timeScale: 0.0005, ease: 'easeInOutQuart', number: 1, scale: 150, frame: false, start: () => start(), stop: () => stop() }; gui.ctrls = { timeScale: gui.add(gui.params, 'timeScale', 0.0001, 0.005, 0.0001), ease: gui.add(gui.params, 'ease', Ease.returnEaseType()). onChange(() => initialize()), number: gui.add(gui.params, 'number', 1, 30, 1). onChange(() => initialize()), scale: gui.add(gui.params, 'scale', 1, 500, 1). onChange(() => initialize()), frame: gui.add(gui.params, 'frame', false), start: gui.add(gui.params, 'start'), stop: gui.add(gui.params, 'stop') }; gui.close(); }; const addFrame = () => { c.rect( width / 2 - frameSize / 2, height / 2 - frameSize / 2, frameSize, frameSize); c.clip(); }; const setupCanvas = () => { canvas = document.createElement('canvas'); document.getElementsByTagName('body')[0].appendChild(canvas); c = canvas.getContext('2d'); }; const initialize = () => { if (id) { cancelAnimationFrame(id); } width = canvas.width = window.innerWidth; height = canvas.height = window.innerHeight; ease = Ease.returnEaseFunc(gui.params.ease); shapes = new Array(); scale = gui.params.scale; num = gui.params.number; frameSize = Math.min(width * 0.9, height * 0.9); maxDist = 0; hexPoints = getPolygonPoints(360, 4); shapes = getSquareGrid(num); draw(0); }; const getSquareGrid = num => { const vectors = new Array(); for (let x = -num; x <= num; x++) { for (let y = -num; y <= num; y++) { vectors.push([x, y]); } } const tmp = new Array(); for (let i = 0; i < vectors.length; i++) { const params = {}; const x = vectors[i][0] * scale; const y = vectors[i][1] * scale; const d = Math.sqrt(x * x + y * y); params.x = x; params.y = y; params.d = d; params.i = i; maxDist = Math.max(d, maxDist); tmp.push(params); } size = Math.floor(scale * Math.sqrt(2) / 2); //size = scale / 2; return tmp; }; const getHexGrid = num => { const vectors = new Array(); for (let x = -num; x <= num; x++) { for (let y = -num; y <= num; y++) { for (let z = -num; z <= num; z++) { if (x + y + z === 0) { vectors.push([x, y]); } } } } const tmp = new Array(); for (let i = 0; i < vectors.length; i++) { const params = {}; const x = Math.sqrt(3) * (vectors[i][0] + vectors[i][1] / 2) / 2 * scale; const y = 3 / 2 * vectors[i][1] / 2 * scale; const d = Math.sqrt(x * x + y * y); params.x = x; params.y = y; params.d = d; maxDist = Math.max(d, maxDist); tmp.push(params); } size = Math.sqrt(3) * (scale / 2) / 2; return tmp; }; const getSquareGrid2 = num => { const tmp = new Array(); const ajust = num * scale / 2 - scale / 2; for (let y = 0; y < num; y++) { for (let x = 0; x < num; x++) { const params = {}; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0