Question

我使用脚本来动画在互联网上找到的钟摆。现在我想添加按钮来改变被宣布为全局的钟摆的任何参数。我通过HTML中的onclick尝试全局功能，但点击后动画消失了......

＆＃13;

var pendulum = {mass: 100, length:500, theta: (Math.PI/2) - 0.05, omega: 0, alpha:0, J:0};

/* My changes... */
function changeBig(){
    pendulum = {mass: 100, length:100, theta: (Math.PI/2) - 0.05, omega: 10, alpha:0, J:0};
}

function changeSmall(){
    pendulum = {mass: 100, length:100, theta: (Math.PI/2) - 0.05, omega: 1, alpha:0, J:0}; 
}
/* My changes end */

＆＃13;

canvas {
    display:block;
    margin:0px auto;
    height:600px;
    width:400px;
    border:none;
}

＆＃13;

<canvas id="canvas" height="600" width="400"></canvas>
<button onClick="changeSmall()">Small</button>
<button onclick="changeBig()">Huge </button>

＆＃13;

那么我应该改变什么来使这个按钮工作，我的意思是在这里改变欧米茄（钟摆会摆动多远？

Answer 1

您不能只覆盖pendulum对象。它在动画期间用于更改值。

简单的解决方法是更改欧米茄值

function changeBig(){
    pendulum.omega = 10;
}

function changeSmall(){
    pendulum.omega = 1;
}

更多涉及的内容需要对代码进行大量重构。

函数不会更改值，动画会消失

1 个答案: