2013-04-10 21:29:02 -07:00
|
|
|
<html>
|
|
|
|
|
<body>
|
|
|
|
|
<canvas id="canvas" width="600" height="500"></canvas>
|
2015-11-18 06:14:39 +00:00
|
|
|
|
2013-04-10 21:29:02 -07:00
|
|
|
<script type="text/javascript">
|
|
|
|
|
var elem = document.getElementById('canvas');
|
|
|
|
|
var context = elem.getContext('2d');
|
|
|
|
|
|
2019-09-12 10:33:56 -07:00
|
|
|
context.fillStyle = '#C0C0C0';
|
2015-11-18 06:14:39 +00:00
|
|
|
context.lineWidth = 1;
|
2013-04-10 21:29:02 -07:00
|
|
|
|
|
|
|
|
var deg_to_rad = Math.PI / 180.0;
|
|
|
|
|
var depth = 9;
|
|
|
|
|
|
|
|
|
|
function drawLine(x1, y1, x2, y2, brightness){
|
2015-11-18 06:14:39 +00:00
|
|
|
context.moveTo(x1, y1);
|
|
|
|
|
context.lineTo(x2, y2);
|
2013-04-10 21:29:02 -07:00
|
|
|
}
|
2015-11-18 06:14:39 +00:00
|
|
|
|
2013-04-10 21:29:02 -07:00
|
|
|
function drawTree(x1, y1, angle, depth){
|
2015-11-18 06:14:39 +00:00
|
|
|
if (depth !== 0){
|
|
|
|
|
var x2 = x1 + (Math.cos(angle * deg_to_rad) * depth * 10.0);
|
|
|
|
|
var y2 = y1 + (Math.sin(angle * deg_to_rad) * depth * 10.0);
|
|
|
|
|
drawLine(x1, y1, x2, y2, depth);
|
|
|
|
|
drawTree(x2, y2, angle - 20, depth - 1);
|
|
|
|
|
drawTree(x2, y2, angle + 20, depth - 1);
|
|
|
|
|
}
|
2013-04-10 21:29:02 -07:00
|
|
|
}
|
2015-11-18 06:14:39 +00:00
|
|
|
|
2013-04-10 21:29:02 -07:00
|
|
|
context.beginPath();
|
|
|
|
|
drawTree(300, 500, -90, depth);
|
|
|
|
|
context.closePath();
|
|
|
|
|
context.stroke();
|
|
|
|
|
</script>
|
2015-11-18 06:14:39 +00:00
|
|
|
|
2013-04-10 21:29:02 -07:00
|
|
|
</body>
|
|
|
|
|
</html>
|
