问题描述
这是我作业的问题
您需要在 Canvas 中创建相同的动画。这可以是任何对象:卡车、汽车、自行车、飞机等。Blackboard 中提供了许多示例代码来帮助您,我也在讲座中给了您提示。
- 加载页面时,对象应位于屏幕左侧。
- 将有五个按钮:开始、停止、+、- 和改变方向。您可以显示或隐藏您想要的任何按钮。这取决于你。
- 当点击开始按钮时,对象应该开始移动。
- 当您点击停止按钮时,对象应该停止移动。
- 当您点击“改变方向”按钮时,对象应该改变方向。
- 当您点击 + 按钮时,物体的速度应该增加,而当您点击 - 按钮时,速度应该降低。
- 在按钮下方,应该有做这个问题的学生的名字。
我试图解决它,但它似乎对我不起作用。
我想通过 jQuery 使用 html/js 制作更改方向按钮。
$(document).ready(function() {
var canvas = $("#myCanvas");
var ctx = canvas.get(0).getContext("2d");
var playAnimation = true;
var startButton = $("#startAnimation");
var stopButton = $("#stopAnimation");
var increaseButton = $("#increase");
var decreaseButton = $("#decrease")
var x = 0;
var b = 200;
var t = 200;
var w = 200;
var q = 255;
var cir = 240;
var cir2 = 90;
var ctx;
startButton.hide();
startButton.click(function() {
$(this).hide();
stopButton.show();
playAnimation = true;
animate();
});
stopButton.click(function() {
$(this).hide();
startButton.show();
playAnimation = false;
});
/*function increase() {
speed += 10;
};*/
increaseButton.click(function() {
var interval = 1000;
timer = function() {
interval--;
//do your thing here
interval = interval < 40 ? 40 : interval;
setTimeout(timer,interval);
};
timer();
});
/*stopButton.click.(function(){
if(mouseX >= 335 && mouseX <= 390 && mouseY >= 15 && mouseY <= 115){
x++;//Make faster
}
if(mouseX >= 335 && mouseX <= 390 && mouseY >= 295 && mouseY <= 395){
x--;//Make slower
if(speed < 0){
speed++;//Make faster,I said IT CAN'T GO TO 0 or less...
}
}
});*/
//var increase = x++;
//var decrease = x--;
function animate() {
x++;
b++;
t++;
w++;
q++;
cir++;
cir2++;
//y++; //update
//ctx.clearRect(0,800,600); //clear
ctx.clearRect(0,canvas.width(),canvas.height());
ctx.fillRect(x,350,190,120);
ctx.fillRect(b,410,60,60);
ctx.beginPath();
ctx.moveto(t,350);
ctx.lineto(w,400);
ctx.lineto(q,400);
ctx.closePath();
ctx.fillStyle = "#black";
ctx.fill();
//var c = document.getElementById("myCanvas");
//var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(cir,490,18,2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill();
ctx.linewidth = 4;
ctx.strokeStyle = '#black';
ctx.stroke();
ctx.beginPath();
ctx.arc(cir2,2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill();
ctx.linewidth = 4;
ctx.strokeStyle = '#black';
ctx.stroke();
//draw();
// removed for snippet: console.log(x);
if (playAnimation)
setTimeout(animate,20);
//repeat
};
animate();
});
/* for snippet - a huge gap at the top makes it unviewable */
#myCanvas { margin-top: -340px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="myCanvas" width="800" height="600">
<!-- Insert fallback content here -->
</canvas>
<div>
<button id="startAnimation">Start</button>
<button id="stopAnimation">Stop</button>
<button id="increase"> Increase the speed</button>
<button id="decrease"> Decrease the speed</button>
</div>
解决方法
您似乎在 animate()
内调用 animate()
,这不是一个好主意。
开始和停止
我用这个来重复运行这个函数
var speed = 10;
var animation = setInterval(function () {
animate();
},speed);
现在,animate()
将每 speed
毫秒运行一次,在本例中为 10 毫秒。 (Canvas 将每 10 毫秒清除并更新一次)
要停止动画,只需用 clearInterval(animation)
停止间隔,通过重新分配它重新开始。
startButton.click(function () {
$(this).hide();
stopButton.show();
animation = setInterval(function () {
animate();
},speed);
});
改变速度
increaseButton.click(function () {
changeSpeed(-10);
});
decreaseButton.click(function () {
changeSpeed(10);
});
function changeSpeed(changeValue) {
speed += changeValue;
clearInterval(animation)
animation = setInterval(function () {
animate();
},speed);
}
改变方向
我添加了一个名为 direction
的新变量,它会让动画在 1
时向前移动,在 -1
时向后移动。
我在 animate()
x++;
b++;
t++;
w++;
q++;
cir++;
cir2++;
与:
x += direction;
b += direction;
t += direction;
w += direction;
q += direction;
cir += direction;
cir2 += direction;
并添加按钮以更改direction
var changeDirection = $("#changeDirection");
changeDirection.click(function () {
direction *= -1;
})
一起:
$(document).ready(function () {
var canvas = $("#myCanvas");
var ctx = canvas.get(0).getContext("2d");
var playAnimation = true;
var startButton = $("#startAnimation");
var stopButton = $("#stopAnimation");
var increaseButton = $("#increase");
var decreaseButton = $("#decrease");
var changeDirection = $("#changeDirection");
var x = 0;
var b = 200;
var t = 200;
var w = 200;
var q = 255;
var cir = 240;
var cir2 = 90;
var ctx;
var direction = 1;
var speed = 10;
startButton.hide();
startButton.click(function () {
$(this).hide();
stopButton.show();
animation = setInterval(function () {
animate();
},speed);
});
stopButton.click(function () {
$(this).hide();
startButton.show();
clearInterval(animation)
});
increaseButton.click(function () {
changeSpeed(-10);
});
decreaseButton.click(function () {
changeSpeed(10);
});
changeDirection.click(function () {
direction *= -1;
})
function changeSpeed(changeValue) {
speed += changeValue;
clearInterval(animation)
animation = setInterval(function () {
animate();
},speed);
}
function animate() {
x += direction;
b += direction;
t += direction;
w += direction;
q += direction;
cir += direction;
cir2 += direction;
//update
ctx.clearRect(0,canvas.width(),canvas.height());
ctx.fillRect(x,350,190,120);
ctx.fillRect(b,410,60,60);
ctx.beginPath();
ctx.moveTo(t,350);
ctx.lineTo(w,400);
ctx.lineTo(q,400);
ctx.closePath();
ctx.fillStyle = "#black";
ctx.fill();
ctx.beginPath();
ctx.arc(cir,490,18,2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill();
ctx.lineWidth = 4;
ctx.strokeStyle = '#black';
ctx.stroke();
ctx.beginPath();
ctx.arc(cir2,2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill();
ctx.lineWidth = 4;
ctx.strokeStyle = '#black';
ctx.stroke();
};
var animation = setInterval(function () {
animate();
},speed);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<canvas id="myCanvas" width="800" height="600">
<!-- Insert fallback content here -->
</canvas>
<div>
<button id="startAnimation">Start</button>
<button id="stopAnimation">Stop</button>
<button id="increase"> Increase the speed</button>
<button id="decrease"> Decrease the speed</button>
<button id="changeDirection"> Change direction</button>
</div>
</body>