Question

请看这个小提琴：https://jsfiddle.net/1gb9a2x3/。

我有一个全屏HTML5画布元素，其中一些块随机移动。这是一个很好的效果，我稍后会调整，但我现在要做的是改变一个或多个元素的用户输入的一些属性。因此，当用户在某处单击按钮时，更改颜色，移动颜色，隐藏它等等。我试图动态操作update函数，但遗憾的是没有运气。在示例中，目前没有覆盖用户输入的代码，因为我尝试的任何东西似乎都没有用，因为范围问题，canvas-element或其他的限制。

顺便说一句，我尝试使用jQuery。所以我的问题是：有没有办法做一个简单的jQuery代码，如：

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

任何让我入门的建议都非常受欢迎。谢谢！

Answer 1

我无法让我的代码工作，因为我看不到错误，但你可以做的是声明某种带有预定义颜色的数组，比如

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

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

canvas.onclick = function(){
    for(var i = 0; i < circles.length; i++){
        circles[i].color = fillColors[0] + circles[i].opacity + ')';
        // first output is "rgba(255,150, 0, opacity)"
    }
    //then move the color to the end of the array
    var color1 = fillColors[0];
    fillColors.splice(0, 1);
    fillColors.push(color1);
}

我希望我帮助过并祝你好运！

Answer 2

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

即可

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

它将随机设置圈子SqlConnection(string) constructor

的大小

你可以在这里查看 valid SQL Server connection string

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

2 个答案: