html5 canvas绘制曼德博集合的核心是将像素映射到复平面，对每个c=z₀²+c迭代计算逃逸时间，用平滑着色逐像素渲染，并支持缩放交互；需注意双精度浮点精度限制。
使用 HTML5 Canvas 绘制曼德博集合（Mandelbrot Set）的核心在于：在复平面上对每个像素点迭代计算复数序列 zₙ₊₁ = zₙ² + c，根据其是否发散（模长是否超过 2）决定颜色。Canvas 提供了逐像素绘制能力，配合 JavaScript 的高效循环与数值计算，可实时渲染出精细分形。
1. 搭建基础 Canvas 环境与坐标映射
先在 HTML 中创建 canvas 元素，并获取 2D 上下文：
<canvas id="fractal" width="800" height="600"></canvas>
JavaScript 中需将画布像素坐标 (x, y) 映射到复平面区域（如 c ∈ [−2.5, 1.0] × [−1.25, 1.25]i），这是分形可见的关键：
- 用 canvas.width / (xMax − xMin) 计算 x 方向每像素对应复数实部跨度
- 同理计算 y 方向虚部跨度，再通过 c.re = xMin + x * dx、c.im = yMin + y * dy 得到每个像素对应的复数 c
- 推荐初始可视范围：x ∈ [−2.0, 0.5], y ∈ [−1.25, 1.25]，能完整呈现主心形结构
2. 实现曼德博迭代逻辑与逃逸时间算法
对每个 c，从 z₀ = 0 开始迭代，记录未发散的迭代次数（即“逃逸时间”）：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 用两个变量 zx, zy 表示当前 z = zx + zy·i，避免创建复数对象提升性能
- 每次迭代： zx₂ = zx * zx − zy * zy + c.rezy₂ = 2 * zx * zy + c.im 再赋值 zx = zx₂, zy = zy₂
- 判断发散：若 zx² + zy² > 4（即 |z| > 2），立即跳出；最大迭代次数建议设为 100–200（兼顾细节与响应速度）
3. 像素着色与平滑优化
原始逃逸时间是整数，直接映射易产生色带。可加入简单平滑：
- 设实际逃逸迭代步数为 n，最大为 maxIter，则平滑值 ≈ n + 1 − log₂(log₂(zx² + zy²))
- 将该值归一化到 [0, 1]，再映射至调色板（如 HSL：hue = n × 0.02，saturation = 100%，lightness = 50% × (1 − n/maxIter)）
- 用 ctx.fillStyle = `hsl(${h},100%,50%)` + ctx.fillRect(x, y, 1, 1) 逐像素绘制（注意关闭抗锯齿：ctx.imageSmoothingEnabled = false）
4. 支持缩放与交互（可选增强）
点击/拖拽实现局部放大，需动态更新复平面范围：
- 记录当前 xMin, xMax, yMin, yMax，点击位置换算为复数 c₀
- 缩放时以 c₀ 为中心，按比例缩小区间宽度（如 ×0.3），重绘
- 为防过度计算，可限制最小缩放级别（如宽度
- 添加加载提示与取消按钮，因深度缩放可能耗时数秒
不复杂但容易忽略：数值精度在深度缩放时会成为瓶颈，纯 JavaScript 使用双精度浮点（约 15 位有效数字），当复平面宽度低于 1e−15 时会出现像素断裂；如需更高精度，需引入大数库（如 decimal.js）或改用 WebGL 加速并自定义着色器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
