My Problem uploaded in codepen Click To see Click to see

Click To Preview Preview

CodePudding user response：

look here. You have to add contex.fillStyle = "here put color you want"; into the if sections ;D You can look at this on my pen https://codepen.io/dzm11/pen/PoBwOrp

    window.onload = function () {
  //کنواهای بدنه را دریافت میکند
  var canvas = document.getElementById("Canvas");
  var contex = canvas.getContext("2d");
  //ساخت چند متغیر-این برای پوزیشن ایکس و وای است
  var x = canvas.width / 2;
  var y = canvas.height / 2;
  //ساخت بیشتر از 2 متغیر-برای سرعته-اگر میخواهید حرکت را سریع ببینید-مقادیر را افزایش میدهد
  var dx = 2;
  var dy = -2;

  draw();

  function draw() {
    //تازه سازی کنواها
    contex.clearRect(0, 0, canvas.width, canvas.height);
    contex.beginPath();
    //اینجا با استفاده از آرک توپ زرد خودمان را ایجاد میکنیم
    contex.arc(x, y, 10, 0, Math.PI * 2);
    // contex.fillStyle="yellow";
    contex.fill();

    //دیوار
    if (x   dx > 480) {
      dx = -dx;
      contex.fillStyle = "red";
    }
    if (x   dx < 0) {
      dx = -dx;
      contex.fillStyle = "yellow";
    }
    if (y   dy > 320) {
      dy = -dy;
      contex.fillStyle = "blue";
    }
    if (y   dy < 0) {
      dy = -dy;
      contex.fillStyle = "black";
    }
    x  = dx;
    y  = dy;
  }
  setInterval(draw, 10);
};