离谱！产品要求我用 JavaScript 画一颗【随机树】！

前言

大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心~

用 JavaScript 画一棵树？

产品说要让前端用 JavaScript 画一棵树出来，但是这难道不能直接让 UI 给一张图片吗？

后来一问才知道，产品要的是一颗 随机树 ，也就是树的 茂盛程度、长度、枝干粗细 都是随机的，那这确实没办法叫 UI 给图，毕竟 UI 不可能给我 10000 张树的图片吧？

所以第一时间想到的就是 Canvas ，用它来画这棵 随机树（文末有完整代码）

Canvas 画一颗随机树

接下来使用 Canvas 去画这棵随机树

基础页面

我们需要在页面上写一个 canvas 标签，并设置好宽高，同时需要获取它的 Dom 节点、绘制上下文，以便后续的绘制

坐标调整

默认的 Canvas 坐标系是这样的

但是我们现在需要从中间去向上去画一棵树，所以坐标得调整成这样：

这些操作可以使用 Canvas 的方法

绘制一棵树的要素

绘制一棵树的要素是什么呢？其实就是 树枝 和 果实 ，但是其实 树枝 才是第一要素，那么 树枝 又有哪些要素呢？无非就这几个点

开始绘制

所以我们可以写一个 drawBranch 来进行绘制，并且初始调用肯定是绘制 树干 ，树干的参数如下：

这个终点应该怎么算呢？其实很简单，根据 树枝长度、生长角度 就可以算出来了，这是初高中的知识

于是我们可以使用 Canvas 的绘制方法，去绘制 线段 ，其实树枝就是一个一个的 线段

到现在我绘制出了一个 树干 出来

但是我们是想让这棵树开枝散叶，所以需要继续递归继续去绘制更多的树枝出来~

递归绘制

其实往哪开枝散叶呢？无非就是往左或者往右

所以需要递归画左边和右边的树枝，并且 子树枝肯定要比父树枝更短、比父树枝更细 ，比如我们可以定义一个比例

而子树枝的生长角度，其实可以随机，我们可以在 0° - 30° 之间随机选一个角度，于是增加了递归调用的代码

但是这个时候会发现，报错了，爆栈了，因为我们只递归开始，但却没有在某个时刻递归停止

我们可以自己定义一个停止规则（规则可以自己定义，这会决定你这棵树的茂盛程度）：

现在可以看到我们已经大致绘制出一棵树了

不过还少了树的果实

绘制果实

绘制果实很简单，只需要在绘制树枝结束的时候，去把果实绘制出来就行，其实果实就是一个个的 白色实心圆

至此这棵树完整绘制完毕

绘制部分的代码如下

结语

我是林三心

完整代码

<template>
<div style="background-color: cadetblue">
<canvasref="canvasRef"width="1000"height="750"></canvas>
</div>
</template>
<scriptsetuplang="ts">
import { ref, onMounted } from'vue';
// 获取 canvas 的 dom 节点
const canvasRef = ref<HTMLCanvasElement | null>(null);
onMounted(() => {
const canvasEle = canvasRef.value;
if (!canvasEle) return;
// 获取 canvas 上下文
const ctx = canvasEle.getContext('2d')!;
// 坐标系移动
ctx.translate(canvasEle.width / 2, canvasEle.height);
// y轴反向
ctx.scale(1, -1);
// coordinate 起始点
// len 树枝长度
// thick 树枝粗细
// angle 生长角度
const drawBranch = (coordinate: [number, number], len: number, thick: number, angle: number) => {
// 绘制结束条件
if (thick < 10 && Math.random() < 0.1) return;
if (thick < 2) {
// 绘制果实
ctx.beginPath();
ctx.arc(...coordinate, 5, 0, 2 * Math.PI);
ctx.fill style = '#fff';
ctx.fill();
return;
}
ctx.beginPath(); // 开启线段绘制
ctx.moveTo(...coordinate); // 初始起始点
// 计算结束点
const endCoordinate: [number, number] = [
coordinate[0] + len * Math.cos((angle * Math.PI) / 180),
coordinate[1] + len * Math.sin((angle * Math.PI) / 180),
];
ctx.lineTo(...endCoordinate); // 线段终点
ctx.stroke style = '#333'; // 线段颜色
ctx.lineWidth = thick; // 线段粗细
ctx.lineCap = 'round';
ctx.stroke(); // 开始画
// 左分支
drawBranch(endCoordinate, len * 0.8, thick * 0.75, angle + Math.random() * 30);
// 右分支
drawBranch(endCoordinate, len * 0.8, thick * 0.75, angle - Math.random() * 30);
};
// 先画树干
drawBranch([0, 0], 100, 20, 90);
// // 坐标、长度、粗细、角度
// const drawBranch = (coordinate: [number, number], len: number, thick: number, angle: number) => {
// if (thick < 10 && Math.random() < 0.1) return;
// if (thick < 2) {
// ctx.beginPath();
// ctx.arc(...coordinate, 5, 0, 2 * Math.PI);
// ctx.fill style = '#fff';
// ctx.fill();
// return;
// }
// ctx.beginPath(); // 开启线段绘制
// ctx.moveTo(...coordinate); // 初始起始点
// const endCoordinate: [number, number] = [
// coordinate[0] + len * Math.cos((angle * Math.PI) / 180),
// coordinate[1] + len * Math.sin((angle * Math.PI) / 180),
// ];
// ctx.lineTo(...endCoordinate); // 线段终点
// ctx.stroke style = '#333'; // 线段颜色
// ctx.lineWidth = thick; // 线段粗细
// ctx.lineCap = 'round';
// ctx.stroke(); // 开始画
// // 左分支
// drawBranch(endCoordinate, len * 0.8, thick * 0.75, angle + Math.random() * 30);
// // 右分支
// drawBranch(endCoordinate, len * 0.8, thick * 0.75, angle - Math.random() * 30);
// };
});












</script>