Javascript 在p5.js中，如何将光标替换为圆形而不是绘制到画布上？

问题：我正在尝试使用p5.js创建一个简单的绘图应用程序。我想在光标位置显示一个代表绘图画笔大小的圆圈，而不是标准的光标图像

潜在解决方案1:使用p5固有的

cursor（）

函数替换光标

为什么不起作用：仅采用以下参数：

箭头、十字、手、移动、文本或等待，或图像的路径

因此，没有使用ellipse类替换光标的本机方法

潜在解决方案2:使用

noCursor（）

函数，然后在光标位置绘制圆圈，同时绘制背景，如下所示：

var brushSize = 50;

function setup() {
  createCanvas(1080,720);
  noCursor();
}


function draw() {
  background(100);
  ellipse(mouseX,mouseY,brushSize);

}

不起作用的原因：虽然此解决方案获得了预期效果，即用画笔大小的圆圈替换光标，但不断更新的背景阻止我在需要时使用画笔实际绘制画布

有没有什么方法可以替换光标，而不用在画布上实际绘制椭圆？有没有办法在p5中保存并立即重新加载画布？我在API文档中找不到这样的搜索方法。欢迎提供任何提示。

根据，您可以将URL传递到

cursor（）

函数以设置图像

如果你想使用你绘制的图像，你必须提前绘制它们并将它们保存到文件中，然后使用这些文件。大概是这样的：

cursor('images/ellipse-15.png');

其中，

ellipse-15.png

是您提前生成的图像，例如，当

brushSize

为15时匹配

顺便说一句，P5.js只是设置游标CSS属性。你可以阅读更多关于它的内容

---

如果您想使用

noCursor（）

方法自己绘制椭圆，您可以将图形绘制到缓冲区（您可以使用

createGraphics（）

函数），然后在每个帧的顶部绘制椭圆。我仍然可能会使用十字光标，因为如果您自己绘制它，会有一些恼人的延迟。

在画布容器中创建一个圆形DIV，并将其显示在实际画布上。

嘿，凯文，感谢您的回复！你知道有没有什么方法可以使用

createGraphics（）

生成一个循环缓冲区，或者它总是一个矩形对象，挡住了画布的一部分？实际上，我想到了一个不同的解决方案，但却遇到了另一个问题。我使用

createGraphics（）

跨越整个画布，在新缓冲区顶部渲染光标椭圆，并重新生成缓冲区的背景。我试图使背景相对于画布透明，但我只能使其相对于自身透明。你知道有没有一种方法可以让我重新创建一个透明的背景，从而达到预期的效果？@SkylarKennedy请在他们自己的帖子中提出后续问题。我不明白你所说的“相对于自身透明”是什么意思。默认情况下，从

createGraphics（）

返回的缓冲区是透明的。谢谢Kevin，我问了后续问题欢迎。请扩展您的答案，以包含更多信息，可能还有代码来说明如何实现这一点。目前，您的答案有被删除的风险，因为它目前更像是一条评论。请看。