type
status
date
slug
summary
category
password
tags
icon
Canvas 为我们提供了一个强大的工具，用于在绘制各种图形和动画。今天，我在 Canvas 上绘制了一棵随机树，受益匪浅。
HTML结构
首先，基本的html结构。就一个
<canvas>元素，用于绘制我们的随机树，然后引入用于创建树的逻辑JS。核心逻辑
第一步就是获取canvas的上下文对象，然后设置宽高，这里一定要 × devicePixelRatio，不然画出来的图像在有的设备上可能会显示不清晰。
devicePixelRatio
devicePixelRatio 是设备的物理像素分辨率与 CSS 像素分辨率的比值。这个比值可以确保在不同设备上图像和图形显示的清晰度。什么是物理像素和 CSS 像素？
- 物理像素：设备屏幕上实际存在的像素点。
- CSS 像素：Web 开发中使用的抽象单位，与屏幕上显示的内容进行交互。
devicePixelRatio 的计算方式
devicePixelRatio 的值是通过以下公式计算得出的：
devicePixelRatio=物理像素CSS 像素devicePixelRatio=CSS 像素物理像素例如：
- 对于一个普通显示器，1 个 CSS 像素通常对应 1 个物理像素，因此
devicePixelRatio通常为 1。
- 对于笔记本，通常系统的缩放比例是125%，所以这时
devicePixelRatio是1.25，比如我的：
- 对于高分辨率（如视网膜显示器）设备，1 个 CSS 像素可能对应多个物理像素（例如 2 个物理像素），因此
devicePixelRatio通常为 2。
然后需要调整canvas的坐标系
接下来，我们需要将坐标原点移动到页面底部中心，并翻转Y轴，这样我们就可以从底部开始绘制树干，向上延伸。这样更符合自然的树的生长方式。
接着，我们要开始绘制树的分支。每一次分支的生成，都会基于上一次分支的终点，并且会有一定的角度偏移。我们还需要设定一个终止条件，当分支的宽度小于某个值时，我们就停止绘制，以此模拟出树的自然生长。
这样，我们就完成了一棵随机生成的树的绘制，可以尝试改变参数，看看能生成怎样的树。
最后，调用函数绘制初始树干。
完整代码
欢迎您在底部评论区留言，一起交流~
- 作者:NotionNext
- 链接:https://lsnx.top/article/canvas-random-tree
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。