p5.js草图需确保dom就绪后执行：script标签放body末尾或用domcontentloaded监听；指定容器用new p5(sketch,'id')；避免全局污染启用instancemode；本地开发须用http服务而非file://协议。
怎么把 p5.js 草图嵌进 HTML 页面里跑起来
直接能跑，但得按对顺序——p5.js 不是 script 标签一贴就完事，它依赖 DOM 就绪和画布容器存在。最简路径是：先写好 setup() 和 draw()，再确保 <script></script> 在 DOM 元素之后加载，或用 window.onload / document.addEventListener('DOMContentLoaded') 包一层。
- 别把
<script src="https://cdn.jsdelivr.net/npm/p5@1.9.4/lib/p5.js"></script>放在里就不管了，否则createCanvas()可能找不到 body - 如果草图需要操作某个特定
<div id="sketch-holder">，得用 <code>new p5(sketch, 'sketch-holder')构造函数传入容器 ID，而不是默认全屏创建 - 多个草图共存时，每个都要独立的
new p5(...)实例，不能共享全局setup/draw -
createCanvas()必须在p5实例初始化后调用，也就是必须在new p5(...)的回调函数（即你的sketch函数）内部，不能裸写在全局作用域 - 如果用了
new p5(sketch, 'container-id')，但对应 ID 的元素不存在，p5.js会静默失败，画布不渲染也不报错——检查元素是否存在、拼写是否一致 - 响应式场景下，别在
setup()里硬写固定宽高，改用createCanvas(windowWidth, windowHeight)或监听windowResized() - 显式启用实例模式：在
<script></script>中第一行加p5.instanceMode = true;，然后所有代码必须包裹在new p5(...)的回调里 - 此时
createCanvas()、background()等不再可用作全局函数，必须通过实例调用，比如p.createCanvas(400, 400) - 适合中大型项目或嵌入 CMS/框架页面，避免意外覆盖已有逻辑；小 demo 可省略，但建议从一开始就养成习惯
- 这不是代码问题，是协议限制——必须走
http://或https://。临时解决：用 VS Code 的 Live Server 插件，或命令行起个简易服务：npx http-server - 开发阶段别用相对路径如
"assets/cat.png"硬写死，先确认路径在服务器环境下可访问；可用console.log(window.location.href)辅助判断当前根路径 - 线上部署时，确保静态资源和 HTML 同域，且服务器允许跨源（如需外部 CDN）要配好
Cross-Origin-Resource-Policy
createCanvas() 在 HTML 里为什么没反应或报错
常见现象是页面空白、控制台报 Uncaught ReferenceError: createCanvas is not defined，或者画布尺寸为 0×0。本质是执行时机不对，或上下文丢失。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
用 instanceMode 避免全局污染和冲突
默认模式下，p5.js 把 setup、draw、mousePressed 等挂到全局，和其他库（比如 jQuery、Three.js）或你自己写的同名函数打架。真遇到“函数被覆盖”“事件不触发”，大概率是这个原因。
本地开发时 file:// 协议下图片/音频加载失败
浏览器安全策略限制：用 file:// 直接双击打开 HTML，loadImage()、loadSound() 会卡住或报 CORS 错误，控制台显示 Failed to load resource: net::ERR_FILE_NOT_FOUND 或类似。
