Processing.js已停止维护且依赖被禁用的eval()，现代浏览器不支持其内联脚本；应改用p5.js，注意canvas声明时机、作用域隔离、函数命名及尺寸设置差异。
HTML里直接写Processing.js代码为什么报错ReferenceError: Processing is not defined
因为processing.js早已停止维护，2018年后主流浏览器默认禁用eval()执行内联脚本，而旧版processing.js依赖它动态解析<script type="application/processing">里的代码。现在直接嵌入会卡在初始化阶段。
实操建议：
- 别用
<script type="application/processing">——现代浏览器根本不认这个MIME类型 - 改用显式加载
processing.min.js（需从archive.org找v1.4.8或更早版本，新CDN链接基本都404了） -
<canvas>必须提前声明id，且不能是动态生成的DOM节点；Processing.js只扫描页面加载时已存在的<canvas id="myCanvas"> - JS初始化代码得放在
</body>前，或用window.addEventListener('load', ...)包裹，否则document.getElementById可能取不到canvas
Processing.js和p5.js混用会导致TypeError: p.setup is not a function
Processing.js和p5.js虽然语法相似，但全局对象、生命周期钩子、渲染上下文完全不兼容。共存时后者常被前者污染，或反过来覆盖setup()/draw()定义。
实操建议：
- 彻底放弃Processing.js，改用p5.js——它主动维护、ES模块友好、支持
instanceMode隔离作用域 - 如果必须保留老Processing代码，就别引入任何p5.js文件，连
p5.min.js都不能加载 - 检查控制台是否出现
Uncaught SyntaxError: Identifier 'p' has already been declared，这是典型命名冲突信号 - p5.js中用
new p5(sketch, canvas)方式挂载到指定<canvas>，避免污染全局
把Processing原生代码转成p5.js时size()和mousePressed()行为异常
p5.js没有size()函数，且事件函数名全带mouse前缀（如mousePressed），而Processing原生是void mousePressed(){}这种Java风格写法，直接复制过去会静默失败。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
实操建议：
-
size(400, 300)→ 改成createCanvas(400, 300)，且必须放在setup()第一行 -
mousePressed()→ 写成function mousePressed() { ... }，注意p5.js要求它是全局函数，不能包在sketch = (p) => { ... }里（除非用p.mousePressed） - 变量作用域：Processing里
int x = 0;是全局，p5.js里得显式声明let x = 0;，否则ReferenceError - 颜色函数差异：
color(255, 0, 0)可用，但fill(#FF0000)十六进制字面量不支持，得写成fill(255, 0, 0)或fill('#FF0000')
用p5.js在HTML中运行却看不到画布，控制台也没报错
最常见原因是<canvas>被CSS隐藏、父容器宽高为0、或createCanvas()调用时机不对——比如在preload()里调用，或在异步回调里执行。
实操建议：
- 检查
<canvas id="myCanvas">是否被display: none、visibility: hidden或height: 0样式影响 - 确保
createCanvas()在setup()中执行，且该函数由p5实例正确调用；若用new p5(sketch)，则sketch必须是函数，不能是对象字面量 - 给canvas加边框：
canvas { border: 1px solid red; }，快速验证是否渲染区域存在 - 用
console.log(canvas.parentNode.offsetWidth)确认父容器有实际尺寸，p5默认按父容器缩放时很依赖这个值
