使用canvas绘制一棵树

孙泽辉

发布于：2021年10月3日

字数：588字

时长：2分钟

次浏览

canvas能解决css解决不了的画图问题，学习一下。

什么是canvas？

HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

——转自菜鸟教程

如何绘制一棵树？

看到树这种结构很难不想到递归，递归的过程就像是一棵树，在递归的过程中把枝干画出来就是一棵完整的树了。

对于每个枝干位置的控制可以使用圆的参数方程：

\text{对于"12点为起点，角度增大时为顺时针方向"} \\ nextX = a + r \sin(\alpha) \\ nextY = b - r \cos(\alpha)

这里使用的Math.sin需要传入弧度，角度转弧度：

a * (\pi/180)

代码实现：

// ...
function tree_plot(ctx: CanvasRenderingContext2D, p: Point, a: number, w: number, h: number, L: number) {
    // 出口
    if (L > 10) {
        return;
    }

    // 绘制一棵树
    const {x, y} = p;
    ctx.translate(x, y)
    ctx.rotate(a * Math.PI / 180)
    ctx.moveTo(-w / 2, 0)
    ctx.lineTo(-w * 0.65 / 2, -h)
    ctx.lineTo(w * 0.65 / 2, -h)
    ctx.moveTo(w / 2, 0)
    ctx.strokeStyle = "black";
    ctx.setTransform(1, 0, 0, 1, 0, 0)
    ctx.fill()

    // 递归下一个树枝
    const nextX = x + h * Math.sin(a * Math.PI / 180)
    const nextY = y - h * Math.cos(a * Math.PI / 180)
    tree_plot(ctx, {x: nextX, y: nextY}, a + 15, w * 0.65, h * 0.9, L + 1)
    tree_plot(ctx, {x: nextX, y: nextY}, a - 15, w * 0.65, h * 0.9, L + 1)
}


tree_plot(ctx, {x: width / 2, y: height}, 0, 30, 180, 0)

遇到的问题：

使用canvas画出来的图像有锯齿

得到Steven大佬的回答：

解决方式：

const canvas = document.getElementById("myCanvas") as HTMLCanvasElement;
const ctx = canvas.getContext("2d");
const
    //  计算画布的宽度 * 2
    width = canvas.offsetWidth * 2,
    //  计算画布的高度 * 2
    height = canvas.offsetHeight * 2;


//  设置宽高
canvas.width = width;
canvas.height = height;