Javascript 单击鼠标更改画布元素属性

请看这把小提琴：

我有一个全屏HTML5画布元素，其中一些块有点随机移动。这是一个很好的效果，稍后我将对其进行调整，但我现在要做的是更改用户输入的单个或多个元素的某些属性。因此，当用户单击某个按钮时，可以更改颜色、移动、隐藏它，等等。我试图在运行中操纵

update

函数，但不幸的是，一点运气都没有。在这个例子中，目前还没有覆盖用户输入的代码，这仅仅是因为我尝试的任何东西似乎都不起作用，因为范围问题、canvas元素的限制或其他原因

顺便说一句，我试着用jQuery来实现这一点。所以我的问题是：有没有一种方法可以完成一段简单的jQuery代码，比如：

$('button').click(function() {
   Item[0].width = 10;
   update();
});

---

任何让我开始的建议都是非常受欢迎的。谢谢大家!

我无法让代码正常工作，因为我看不到错误，但您可以做的是声明某种数组，其中包含预定义的颜色，如

fillColors = ["rgba(255,150, 0,","rgba(255, 255, 255,"];

然后在画布onclick中，执行for循环，将“圆圈”颜色设置为数组中的下一个颜色。（另外，请确保为items对象指定颜色属性，并使用 ctx.fillStyle=this.color； 在“更新”功能中，使其正常工作）

canvas.onclick=function（）{
对于（变量i=0；i

---

我希望我帮了忙，祝你好运

您的代码几乎是正确的，只需将其更改为以下内容并添加一个按钮即可

$('button').click(function() {
   circles[1].size = Math.random() * 1000;
   // no need for update since it is updated by function draw();
});

它将随机设置圆的大小

你可以在这里查一下

$('button').click(function() {
   circles[1].size = Math.random() * 1000;
   // no need for update since it is updated by function draw();
});