canvas绘制垂柳柳树效果代码-html代码-BFW代码库

canvas绘制垂柳柳树效果代码

代码语言：html

所属分类：其他

代码描述：canvas绘制垂柳柳树效果代码

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

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

<head>

  <meta charset="UTF-8">
  
  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=The+Nautigal&display=swap");

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: "The Nautigal", cursive;
	height: 100vh;
	display: grid;
	place-items: center;
}

#my-canvas {
	border: 0.1rem solid rgba(0, 0, 0, 0.19);
	border-radius: 5%;
	box-shadow: 0px 2px 8px 2px rgb(0 0 0 / 8%);
}
#title {
	margin-top: 43rem;
	position: absolute;
	font-size: 4rem;
	color: hsl(0, 0%, 40%);
}
</style>



</head>

<body >
  <!-- #CodePenChallenge: Fractals -->

<canvas id="my-canvas" width="1000" height="800"></canvas>


  
      <script >
//This is my fractal tree!
//I was too lazy to add leaves, instead I just made a gradient to color the end branches green. Now it's like a weeping willow.

//Sets up the canvas variables
var myCanvas = document.getElementById("my-canvas");
var ctx = myCanvas.getContext("2d");

function random(min, max) {
  return Math.random() * (max - min) + min;
}

//The main draw function
function drawTree(startX, startY, length, angle, branchWidth, hue, sat, light) {
  //Sets line width
  ctx.lineWidth = branchWidth;

  //Starts a path
  ctx.beginPath();

  //Adds current canvas to call stack
  c.........完整代码请登录后点击上方下载按钮下载查看