UniApp Canvas 绘制完美二叉树示例

<template>
  <view class='container'>
    <canvas canvas-id='binaryTree' class='canvas'></canvas>
  </view>
</template>
<script>
export default {
  onReady() {
    const ctx = uni.createCanvasContext('binaryTree', this);

    // 设置画布大小
    const width = uni.upx2px(300);
    const height = uni.upx2px(300);
    ctx.width = width;
    ctx.height = height;

    // 清空画布
    ctx.clearRect(0, 0, width, height);

    // 绘制二叉树
    const treeDepth = 4; // 二叉树深度
    const startX = width / 2; // 根节点的横坐标
    const startY = 20; // 根节点的纵坐标
    const nodeSize = 30; // 节点的大小

    drawBinaryTree(ctx, startX, startY, nodeSize, treeDepth);

    // 绘制二叉树
    function drawBinaryTree(ctx, x, y, size, depth) {
      if (depth === 0) {
        return;
      }

      // 绘制节点
      ctx.beginPath();
      ctx.arc(x, y, size / 2, 0, 2 * Math.PI);
      ctx.stroke();
      ctx.closePath();

      // 绘制左子树
      const leftX = x - size * 2;
      const leftY = y + size * 2;
      drawBinaryTree(ctx, leftX, leftY, size, depth - 1);

      // 绘制右子树
      const rightX = x + size * 2;
      const rightY = y + size * 2;
      drawBinaryTree(ctx, rightX, rightY, size, depth - 1);
    }
  }
};
</script>
<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.canvas {
  width: 300upx;
  height: 300upx;
}
</style>
<p>该代码使用 Canvas 组件来绘制二叉树。通过调用 'uni.createCanvasContext' 方法获取到绘图上下文，并设置画布的大小。然后，在 'onReady' 生命周期钩子函数中，我们清空画布并调用 'drawBinaryTree' 函数来绘制二叉树。</p>
<p>'drawBinaryTree' 函数是一个递归函数，通过传入的参数来确定节点的位置和大小，然后绘制节点，并递归调用自身来绘制左子树和右子树。</p>
<p>在示例代码中，我们定义了一个深度为 4 的完美二叉树，根节点的位置为画布的中心点，节点的大小为 30upx。你可以根据需要调整这些参数来绘制不同大小和深度的二叉树。</p>