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

代码语言:html

所属分类:其他

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

代码标签: 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
    .........完整代码请登录后点击上方下载按钮下载查看

网友评论0