无法制作四种不同颜色的轮子

Question

我一直在做一辆从左边向右边移动的卡车。我把所有的事情都做完了，但我被要求做一个有四种不同颜色的轮子，但我做不到。这是代码。 - 作为评论的每一个代码都是对轮子的一些尝试-。

不需要在此代码中插入它，我一个人做没问题，但如果有人帮我做，我将不胜感激！ :)

<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>

Answer 1

我创建了一个 fillCircle 函数，可以让你用相应的颜色绘制一个 n 切片的圆圈。我还引入了一个 angleOffset 用于绘制轮子，并添加了一个 y 值来处理垂直轴上的定位，将动画向上移动一点。

const angleOffsetFactor = 0.025;
let angleOffsetDelta = 0.05;
let angleOffset = 0;

increaseButton.click(function() {
  changeSpeed(-10);
  angleOffsetDelta += angleOffsetFactor;
});

  decreaseButton.click(function() {
  changeSpeed(10);
  angleOffsetDelta -= angleOffsetFactor;
});

fillCircle(ctx, cir, y + 140, 18, [ 'red', 'yellow', 'blue', 'green' ], angleOffset);

const fillCircle = (ctx, x, y, radius, colors, angleOffset = 0) => {
  const PI2 = Math.PI * 2;
  const sectionAngle = PI2 / colors.length;
  colors.forEach((color, index) => {
    const angleStart = PI2 * (index / colors.length) + angleOffset;
    const angleEnd = angleStart + sectionAngle;
    ctx.beginPath();
    ctx.fillStyle = color;
    ctx.moveTo(x, y);
    ctx.arc(x, y, radius, angleStart, angleEnd, false);
    ctx.closePath();
    ctx.fill();
  });
};

完整示例

const fillCircle = (ctx, x, y, radius, colors, angleOffset = 0) => {
  const PI2 = Math.PI * 2;
  const sectionAngle = PI2 / colors.length;
  colors.forEach((color, index) => {
    const angleStart = PI2 * (index / colors.length) + angleOffset;
    const angleEnd = angleStart + sectionAngle;
    ctx.beginPath();
    ctx.fillStyle = color;
    ctx.moveTo(x, y);
    ctx.arc(x, y, radius, angleStart, angleEnd, false);
    ctx.closePath();
    ctx.fill();
  });
};

$(document).ready(function() {
  const ctx = $("#myCanvas").get(0).getContext("2d");
  const playAnimation = true;
  const startButton = $("#startAnimation");
  const stopButton = $("#stopAnimation");
  const increaseButton = $("#increase");
  const decreaseButton = $("#decrease");
  const changeDirection = $("#changeDirection");
  let x = 0;
  let y = 10;
  let b = 200;
  let t = 200;
  let w = 200;
  let q = 255;
  let cir = 230;
  let cir2 = 90;
  let direction = 1;
  let speed = 10;
  
  const angleOffsetFactor = 0.025;
  let angleOffsetDelta = 0.05;
  let angleOffset = 0;

  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);
    angleOffsetDelta += angleOffsetFactor;
  });

  decreaseButton.click(function() {
    changeSpeed(10);
    angleOffsetDelta -= angleOffsetFactor;
  });

  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;
    angleOffset += angleOffsetDelta;

    //update
    ctx.fillStyle = "red";
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    ctx.fillRect(x, y, 190, 120);
    ctx.fillRect(b, y + 60, 60, 60);

    ctx.beginPath();
    ctx.moveTo(t, y);
    ctx.lineTo(w, y + 50);
    ctx.lineTo(q, y + 50);
    ctx.closePath();
    ctx.fillStyle = "black";
    ctx.fill();

    fillCircle(ctx, cir, y + 140, 18, [ 'red', 'yellow', 'blue', 'green' ], angleOffset);
    ctx.beginPath();
    ctx.arc(cir, y + 140, 18, 0, 2 * Math.PI);
    //ctx.fillStyle = "red";
    //ctx.fill();
    ctx.lineWidth = 4;
    ctx.strokeStyle = 'black';
    ctx.stroke();
    
    fillCircle(ctx, cir2, y + 140, 18, [ 'red', 'yellow', 'blue', 'green' ], angleOffset);
    ctx.beginPath();
    ctx.arc(cir2, y + 140, 18, 0, 2 * Math.PI);
    //ctx.fillStyle = "red";
    //ctx.fill();
    ctx.lineWidth = 4;
    ctx.strokeStyle = 'black';
    ctx.stroke();
  };

  var animation = setInterval(function() {
    animate();
  }, speed);
});

h1 {
  background-color: black;
  color: white;
}

.p1 {
  font-family: "Sofia", sans-serif;
}

#myCanvas {
  border: thin solid grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple">
<canvas id="myCanvas" width="320" height="180"></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>

更新

这是一个带有状态的更干净的版本，但它仍然需要一些工作。

const ui = {
  ctx: null,
  buttons: {
    start: null,
    stop: null,
    increase: null,
    decrease: null,
    changeDirection: null
  },
  colors: {
    wheel: {
      stroke: 'black',
      fill: ['red', 'yellow', 'blue', 'green']
    }
  },
  state: {
    animationId: null,
    play: false,
    vars: {
      x: 0,
      y: 10,
      b: 200,
      t: 200,
      w: 200,
      q: 255,
      cir: [40, 86, 230],
      direction: 1,
      speed: 10,
      speedDelta: 10,
      angleOffsetFactor: 0.025,
      angleOffsetDelta: 0.05,
      angleOffset: 0
    }
  }
}

const main = () => {
  startAnimation();
};

const init = () => {
  ui.ctx = $("#myCanvas").get(0).getContext("2d");
  ui.state = {
    ...ui.state,
    play: true
  };
  ui.buttons = {
    ...ui.buttons,
    start: $("#startAnimation").hide().on('click', onStartClick),
    stop: $("#stopAnimation").on('click', onStopClick),
    increase: $("#increase").on('click', onIncreaseClick),
    decrease: $("#decrease").on('click', onDecreaseClick),
    changeDirection: $("#changeDirection").on('click', onChangeDirectionClick)
  };
};

const startAnimation = () => {
  ui.state.animationId = setInterval(animate, ui.state.vars.speed);
};

const stopAnimation = () => {
  clearInterval(ui.state.animationId);
  ui.state.animationId = null;
};

const restartAnimation = () => {
  stopAnimation();
  startAnimation();
};

const onStartClick = function() {
  $(this).hide();
  ui.buttons.stop.show();
  restartAnimation();
};

const onStopClick = function() {
  $(this).hide();
  ui.buttons.start.show();
  stopAnimation();
};

const onIncreaseClick = function() {
  changeSpeed(-ui.state.vars.speedDelta);
  ui.state.vars.angleOffsetDelta += ui.state.vars.angleOffsetFactor;
};

const onDecreaseClick = function() {
  changeSpeed(ui.state.vars.speedDelta);
  ui.state.vars.angleOffsetDelta -= ui.state.vars.angleOffsetFactor;
};

const onChangeDirectionClick = function() {
  ui.state.vars.direction *= -1;
};

const changeSpeed = (changeValue) => {
  ui.state.vars.speed += changeValue;
  restartAnimation();
}

const animate = () => {
  update();
  drawTruck();
};

const update = () => {
  const {
    x, b, t, w, q, cir, angleOffset, angleOffsetDelta, direction
  } = ui.state.vars;

  ui.state.vars = {
    ...ui.state.vars,
    x: x + direction,
    b: b + direction,
    t: t + direction,
    w: w + direction,
    q: q + direction,
    cir: cir.map(v => v + direction),
    angleOffset:  angleOffset + angleOffsetDelta
  };
};

const drawTruck = () => {
  const { ctx } = ui;
  const { colors } = ui;
  const { state: { vars } } = ui;

  ctx.fillStyle = "red";
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  ctx.fillRect(vars.x, vars.y, 190, 100);
  ctx.fillRect(vars.b, vars.y + 40, 60, 60);

  ctx.beginPath();
  ctx.moveTo(vars.t, vars.y);
  ctx.lineTo(vars.w, vars.y + 30);
  ctx.lineTo(vars.q, vars.y + 30);
  ctx.closePath();
  ctx.fillStyle = "black";
  ctx.fill();

  vars.cir.forEach(c => drawWheel(ctx, c, vars.y + 100, 18, colors.wheel, vars.angleOffset));
};

const drawWheel = (ctx, x, y, r, colors, angleOffset) => {
  fillCircle(ctx, x, y, r, colors.fill, angleOffset);
  ctx.beginPath();
  ctx.arc(x, y, r, 0, 2 * Math.PI);
  ctx.lineWidth = 4;
  ctx.strokeStyle = colors.stroke;
  ctx.stroke();
};

const fillCircle = (ctx, x, y, radius, colors, angleOffset = 0) => {
  const PI2 = Math.PI * 2;
  const sectionAngle = PI2 / colors.length;
  colors.forEach((color, index) => {
    const angleStart = PI2 * (index / colors.length) + angleOffset;
    const angleEnd = angleStart + sectionAngle;
    ctx.beginPath();
    ctx.fillStyle = color;
    ctx.moveTo(x, y);
    ctx.arc(x, y, radius, angleStart, angleEnd, false);
    ctx.closePath();
    ctx.fill();
  });
};

$(document).ready(function() {
  init();
  main();
});

#myCanvas {
  border: thin solid grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple">
<canvas id="myCanvas" width="436" height="140"></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>

无法制作四种不同颜色的轮子

Couldn't make a wheel with four different color

html

javascript

canvas

html5-canvas

完整示例

更新