canvas随机圆圈堆积成花朵效果代码
代码语言:html
所属分类:其他
代码描述:canvas随机圆圈堆积成花朵效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,700"> <style> Body { display: flex; justify-content: center; align-items: center; flex-direction: column; height: 95vh; background-color: #fff; font-family: Montserrat, sans-serif; } circle { stroke-width: 1px; stroke: #333; mix-blend-mode: multiply; opacity: 0; } button { background-color: #fff; border: 1px solid #ccc; color: black; padding: 8px 16px; text-align: center; text-decoration: none; display: inline-block; cursor: pointer; font-size: 0.5em; text-transform: uppercase; border-radius: 5px; transition: 0.4s; } button:hover { border: 1px solid #000; } </style> </head> <body translate="no"> <svg id="flower" width="600" height="600"></svg> <button onclick="generateFlower()">create a new flower</button> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.12.2.js"></script> <script > const svg = document.getElementById("flower"); function generateFlower() { //Remove old flower const circles = svg.querySelectorAll("circle"); circles.forEach((circle) => { circle.remove(); }); // Decide types of flower const flowerPoints = randomNumbers(4, 6); const flowerLayer = randomNumbers(3, 4); const leafSize = randomNumbers(75, 150); const colorScheme = randomColorScheme(); let leafColor = randomHLS(1, 360); // Use if monochrome const degstart = randomNumbers(1, 360); // Use if 90deg // Create Flower for (let i = 0; i < flowerLayer; i++) { if (colorScheme === "warmcolor") { leafColor = randomHLS(1, 180); } else if (co.........完整代码请登录后点击上方下载按钮下载查看
网友评论0