Canvas蒙特卡洛模拟的核心是生成随机点、判断是否满足条件、绘制符合条件的点；通过大量均匀采样逼近概率或几何特征，如估算π、绘制花瓣曲面、生成热力云图等。
用 Canvas 模拟蒙特卡洛随机分布，核心是“生成随机点 + 判断是否满足目标条件 + 绘制符合条件的点”。它不依赖复杂数学推导，而靠大量采样逼近概率或几何特征，比如估算圆周率、绘制花瓣曲面、生成热力云图轮廓等。
准备 Canvas 画布与上下文
先在 HTML 中声明一个 <canvas> 元素，并通过 JavaScript 获取其 2D 渲染上下文：
- 设置明确的
width和height属性（如width="600" height="400"），避免 CSS 缩放导致像素失真 - 用
document.getElementById()获取 canvas 元素，再调用.getContext("2d")得到绘图环境 - 可选：用
context.fillStyle设定默认填充色，context.fillRect()或context.fillRect(x, y, w, h)可清空画布背景
实现蒙特卡洛采样的关键逻辑
蒙特卡洛在这里体现为“在定义域内均匀撒点，再按规则筛选”。例如模拟单位圆内随机点分布：
- 用
Math.random()生成 [0,1) 区间内的两个随机数x和y，代表画布归一化坐标 - 将它们映射到实际画布区域（如
x * canvas.width,y * canvas.height） - 判断是否落在目标区域内：对单位圆即检查
(x-0.5)^2 + (y-0.5)^2 < 0.25（以画布中心为圆心、半径 0.5） - 若满足，用
context.fillRect(x, y, 1, 1)或context.beginPath(); context.arc(x,y,1,0,Math.PI*2); context.fill()绘制单个点
控制采样密度与视觉效果
点太稀疏看不出趋势，太密又无意义。需平衡效率与表现力：
立即学习“前端免费学习笔记（深入）”；
- 通常一次循环采样 1000–10000 个点较合适；更多点可用
requestAnimationFrame分批绘制，防止页面卡顿 - 用透明度（如
context.fillStyle = "rgba(255,0,0,0.2)"）叠加多次采样，能自然呈现概率密度差异 - 若模拟曲面（如玫瑰花瓣），可把判断逻辑换成参数化函数返回三维坐标，再用正交投影转为二维位置并绘制
- 避免重复绘制同一像素：可在内存中维护一个布尔数组或使用
Uint8ClampedArray直接操作图像数据提升性能
常见应用示例参考
这类模拟不止于教学演示，已有实际延展：
- 估算 π：统计圆内点数 ÷ 总点数 × 4，随采样增加逐步收敛
- 生成 3D 玫瑰：用 31 个显式曲面函数 + 蒙特卡洛采样，每个面独立撒点并投影，再按深度排序绘制
- 热力云图基础：在指定矩形区域内随机布点，按温度值映射颜色与透明度，配合高斯模糊形成渐变效果
- 不规则形状填充：定义任意路径后，用点在路径内的判定（
isPointInPath）替代几何公式，更灵活
