【发布时间】：2021-05-28 22:35:36
【问题描述】：
我一直在做一辆卡车从左侧移动到右侧。 我把一切都做好了，但我被要求做一个有四种不同颜色的轮子，但我做不到。 这是代码。 - 并且每一个作为注释的代码都是一些尝试-。
不需要将其插入此代码中，我可以独自完成，但如果有人为我完成，我将不胜感激！ :)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>My first animation in canvas</title>
<meta charset="utf-8">
<!-- http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"-->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(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;
/*var cir1
var cir2
var cir3
var cir4
var cir5
var RAD = 100
var split = 4*/
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 drawCircle(x,y,r,s,e,color) {
ctx.beginPath();
ctx.fillStyle = "#random";
ctx.arc(x,y,r,s,e)
ctx.closePath()
ctx.fill;
ctx.stroke;
drawCircle(150, 150, RAD,1.5*Math.PI,(Math.PI/2),"yellow");
drawCircle(150, 150, RAD,Math.PI/2,1.5*Math.PI,"brown");
drawCircle(150, 150, RAD,Math.PI,3*Math.PI,"blue");
drawCircle(150, 150, RAD,1.5*Math.PI,3*Math.PI,"orange");*/
function animate() {
x += direction;
b += direction;
t += direction;
w += direction;
q += direction;
cir += direction;
cir2 += direction;
/*cir1 += direction;
cir2 += direction;
cir3 += direction;
cir4 += direction;
cir5 += direction; */
//update
ctx.clearRect(0, 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.fillStyle = "#random";
ctx.arc(x,y,r,s,e)
ctx.closePath()
ctx.fill;
ctx.stroke;
drawCircle(150, 150, RAD,1.5*Math.PI,(Math.PI/2),"yellow");
drawCircle(150, 150, RAD,Math.PI/2,1.5*Math.PI,"brown");
drawCircle(150, 150, RAD,Math.PI,3*Math.PI,"blue");
drawCircle(150, 150, RAD,1.5*Math.PI,3*Math.PI,"orange");*/
ctx.beginPath();
ctx.arc(cir, 490, 18, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill();
ctx.lineWidth = 4;
ctx.strokeStyle = '#black';
ctx.stroke();
ctx.beginPath();
ctx.arc(cir2, 490, 18, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill();
ctx.lineWidth = 4;
ctx.strokeStyle = '#black';
ctx.stroke();
};
var animation = setInterval(function () {
animate();
}, speed);
});
</script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple">
</head>
<style>
h1 {
background-color: black;
color: white;
}
.p1 {
font-family: "Sofia", sans-serif;
}
</style>
<body>
<canvas id="myCanvas" width="1900" height="720">
<!-- 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>
</html>【问题讨论】：
-
四个不同颜色的轮子，还是一个带有四色切片的轮子？
-
四色片的轮子
标签： javascript html canvas html5-canvas