如何在HTML中使用p5.js在图片上方叠加绘制圆形？

你的代码存在几个关键问题，导致无法实现需求，修正方案如下：

错误点分析 #

• draw函数嵌套错误：你把draw()定义在了setup()内部，p5.js要求setup和draw都是全局独立的函数，嵌套会导致draw无法被p5.js正确调用。
• image函数参数语法错误：image(img,0,0,)末尾多了一个逗号，属于语法错误，会导致代码执行失败。
• 图片加载异步问题：直接在setup里加载图片可能出现图片还未加载完成就执行draw的情况，导致图片不显示。

修正后的代码 #

var img;

// 用preload预加载图片，确保图片加载完成后再执行后续代码
function preload() {
  img = loadImage("DSC04051.jpeg");
}

function setup() {
  createCanvas(800, 800);
}

// 全局独立的draw函数，每帧执行一次
function draw() {
  // 先绘制图片作为底层
  image(img, 0, 0, width, height); // 可选：用width和height让图片铺满画布
  // 在图片上方绘制圆形
  circle(mouseX, mouseY, 100);
}

HTML嵌入说明 #

在HTML中引入p5.js库并挂载画布即可，示例HTML代码：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script>
</head>
<body>
  <!-- p5.js会自动在这里创建canvas元素 -->
  <script src="你的脚本文件名.js"></script>
</body>
</html>

注意：确保图片文件DSC04051.jpeg和HTML/JS文件在同一目录下，或者使用正确的相对路径/绝对路径。

内容的提问来源于stack exchange，提问作者Sophia Wilton