2024-06-05 23:00:24 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8" />
|
2024-06-23 13:24:25 +02:00
|
|
|
<title>Recursive tree</title>
|
2024-06-05 23:00:24 +02:00
|
|
|
<!-- <link rel="stylesheet" href="css/style.css"> -->
|
|
|
|
|
<style>
|
|
|
|
|
canvas {
|
|
|
|
|
background: #eee;
|
|
|
|
|
display: block;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
p { width: 800px; margin: 0 auto; }
|
|
|
|
|
ol { width: 800px; margin: 0 auto; }
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<section>
|
|
|
|
|
<h1 align="center">Recursive tree</h1>
|
2024-06-23 13:41:07 +02:00
|
|
|
<p>Reload the page to see another one.</p>
|
2024-06-05 23:00:24 +02:00
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<canvas id="tree" width="1000" height="750"></canvas>
|
|
|
|
|
|
2024-06-22 20:42:31 +02:00
|
|
|
<section>
|
2024-06-23 13:41:07 +02:00
|
|
|
<p>Find out how this magick works at the <a href="https://gitea.djmil.dev/djmil/canva-tree">canvas-tree</a> repo.</p>
|
2024-06-22 20:42:31 +02:00
|
|
|
<p align="right">(c) djmil</p>
|
|
|
|
|
</section>
|
|
|
|
|
|
2024-06-05 23:00:24 +02:00
|
|
|
<script src="tree.js"></script>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
var canvas = document.getElementById("tree");
|
|
|
|
|
ctx = canvas.getContext("2d");
|
|
|
|
|
tree(ctx, canvas.width/2, canvas.height, 200);
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
|
2024-06-23 13:24:25 +02:00
|
|
|
</html>
|
