js+svg实现向日葵效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：js+svg实现向日葵效果代码，点击向日葵可切换不同的形态。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
<style>
body {
  background-color: #1A4AF7;
  display: grid;
  place-items: center;
}

html, body {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
}

div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: 100vmin;
  width: 100vmin;
}

svg {
  height: 100%;
  width: 100%;
}

svg, g {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
</style>


</head>

<body>
  <div>
	<svg class="sunflower" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" role="img"></svg>
	<svg class="sunflower" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" role="img"></svg>
	<svg class="sunflower" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" role="img"></svg>
	<svg class="sunflower" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" role="img"></svg>
</div>

  
      <script  >
function getRand (min, max) {
	return Math.floor(Math.random() * (max - min + 1)) + min;
}

class Illustration {
	boxSize;
	hue = 0;
	box = { width: 0, height: 0 };
	element;
	svg;

	constructor(selector, settings) {
		this.boxSize = 500;
		this.box = {
			width: this.boxSize * 4,
			height: this.boxSize * 4
		};
		this.settings = settings;
		this.setSVG(selector);

		this.draw();
	}

	setSVG(selector) {
		this.svg = selector;
		this.svg.addEventListener("click", this.draw.bind(this));
		this.svg.setAttribute(
			"viewBox",
			`0 0 ${this.boxSize * 4} ${this.boxSize * 4}`
		);
		this.svg.style.strokeWidth = 1.5;
	}

	reset() {
		delete this.element;
		this.element = null;
		this.svg.innerHTML = "";
	}

	draw() {
		this.reset();
		this.settings.hue.value.value = 44;

		const element = new Flower(
			this.boxSize * 2,
			this.boxSize * 2,
			this.boxSize * 0.5,
			this.boxSize * 0.75,
			this.settings
		);

		this.element = element.getDOMElement();
		this.svg.appendChild(this.element);
	}
}

class Flower {
	x;
	y;
	width;
	height;
	hue;
	element;
	background;

	constructor(x, y, width, height, settings) {
		this.shapes = [];
		this.x = x;
		this.y = y;
		this.width = width;
		this.height = height;
		this.settings = settings;
		this.petalCount = getRand(
			settings.petals.value.min,
			settings.petals.value.max
		);
		this.loopCount = Math.floor(getRand(
			settings.layers.value.min,
			settings.layers.value.max
		));

		this.hue = settings.hue.value.value;
		this.hueStep = getRand(
			settings.hue.step.min,
			settings.hue.step.max
		);

		this.saturation = getRand(
			settings.saturation.value.min,
			settings.saturation.value.max
		);
		this.saturationStep = getRand(
			settings.saturation.step.min,
			settings.saturation.step.max
		);

		this.lightness = getRand(
			settings.lightness.value.min,
			settings.lightness.value.max
		);
		this.lightnessStep = getRand(
			settings.lightness.step.min,
			settings.lightness.step.max
		);

		this.widthFraction = getRand(
			settings.petals.widthScalePerLayer.min,
			settings.petals.widthScalePerLayer.max
		) / 100;
		this.heightFraction = getRand(
			settings.petals.heightScalePerLayer.min,
			settings.petals.heightScalePerLayer.max
		) / 100;

		this.createFlower();
		this.setDOMElement();
	}

	createFlower() {
		const petalsPeerLoop = Math.floor(this.petalCount / this.loopCount);
		const angleStep = 360 / petalsPeerLoop;
		

		let group = document.createElementNS("http://www.w3.org/2000/svg", "g");
		let petals = [];
		for(let i = 0; i < petalsPeerLoop * 2.25; i++) {
			const wBase = this.width;
			const hBase = this.height;
			const hueVariation = getRand(
				this.settings.hue.variation.min,
				this.settings.hue.variation.max
			);
			const saturationVariation = getRand(
				this.settings.saturation.variation.min,
				this.settings.saturation.variation.max
			);
			const lightnessVariation = getRand(
				this.settings.lightness.variation.min,
				this.settings.lightness.variation.max
			);

			let leaf = new Leaf(
				this.x,
				this.y - .6 * hBase,
				wBase - wBase * Math.random() / 10,
				1.35 * hBase + hBase * Math.random() / 10,
				`hsl(${40 + hueVariation}, 
					 ${60 + saturationVariation}%, 
					 ${55 + lightnessVariation}%)`,
				`hsl(40, 
					 ${60 * 0.25}%, 
					 ${55 * 0.25}%)`
			).element;

				let angleVariation =
					getRand(
						this.settings.petals.wobbliness.min,
						this.settings.petals.wobbliness.max
					) / 100;
				Math.random() > 0.5 ? angleVariation *= -1 : null;

			leaf.setAttribute(
				"transform",
				`rotate(${angleStep / 2.25 * i + angleVariation} ${this.x} ${this.y})`
			);

			petals.push(leaf);
		}
		
		petals = petals.sort(() => Math.random() - 0.5);
			group.append(...petals);

			this.shapes.push(group);
		

		for (let i = 0; i < this.loopCount; i++) {
			let group = document.createElementNS("http://www.w3.org/2000/svg", "g");
			const wBase = this.width * Math.pow(this.widthFraction, i);
			const hBase = this.height * Math.pow(this.heightFraction, i);

			for (let j = 0; j < petalsPeerLoop; j++) {
				const hueVariation = getRand(
					this.settings.hue.variation.min,
					this.settings.hue.variation.max
				);.........完整代码请登录后点击上方下载按钮下载查看