canvas绘制长满叶子的树效果代码-html代码-BFW代码库

canvas绘制长满叶子的树效果代码

代码语言：html

所属分类：其他

代码描述：canvas绘制长满叶子的树效果代码

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

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

<head>

    <meta charset="UTF-8">



    <style>
        canvas {
        	background: #f4f4f4;
        	height: 100vh;
        	left: 0;
        	position: absolute;
        	top: 0;
        	width: 100vw;
        }
    </style>



</head>

<body>
    <canvas class="tree"></canvas>


    <script>
        const defaultSettings = {
        	selector: ".tree",
        	size: {
        		width: window.innerWidth,
        		height: window.innerHeight
        	},
        	levels: 4,
        	leaves: {
        		count: randomInt(2, 6),
        		range: randomInt(45, 75),
        		widthRatio: random(0.15, 0.3),
        		heightRatio: 1
        	},
        	height: {
        		start: window.innerHeight / random(3.5, 4.5),
        		multiplier: random(0.9, 1)
        	},
        	lineWidth: {
        		start: randomInt(10, 15),
        		multiplier: 0.85
        	},
        	angle: {
        		start: 0,
        		delta: randomInt(15, 20)
        	},
        	color: {
        		start: {
        			h: randomInt(175, 380),
        			s: randomInt(30, 37),
        			l: randomInt(45, 57)
        		},
        		delta: {
        			h: randomInt(2, 5),
        			s: random(2, 3.5),
        			l: random(2, 3)
        		}
        	}
        };
        
        function random(min, max) {
        	return Math.random() * (max - min) + min;
        }
        
        function randomInt(min, max) {
        	return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        
        class Tree {
        	canvas;
        	context;
        
        	constructor(settings) {
        		this.props = Object.assign(defaultSettings, settings);
        
        		this.setCanvas();
        		this.setContext();
        		this.init();
        	}
        
        	setCanvas(selector) {
        		this.canvas = document.querySelector(
        			selector ? selector : this.props.selector
        		);
        		this.canvas.width = this.props.size.width;
        		this.canvas.height = this.props.size.height;
        	}
        
        	getCanvas() {
        		return this.canvas;
        	}
        
        	setContext() {
        		this.context = this.canvas.getContext("2d");
        	}
        
        	getContext() {
        		return this.context;
        	}
        
        	init() {
        		this.context.fillStyle = `
        			hsl(${this.props.color.start.h - this.props.color.delta.h}, 
        			${this.props.color.start.s - 3 * this.props.color.delta.s}%, 
        			${this.props.color.start.l - 3 * this.props.color.delta.l}%)`;
        		this.context.fillRect(0, 0, this.props.size.width, this.props.size.height);
        
        		this.draw(
        			0, // i
        			this.props.size.width / 2, // x
        			this.props.size.height, // y
        			this.props.height.start,
        			this.props.angle.start,
        			this.props.lineWidth.start,
     .........完整代码请登录后点击上方下载按钮下载查看