如何在单击按钮 SPLIT 时添加拆分背景

Question

let context = canvas.getContext("2d");
// for canvas size
var window_width = window.innerWidth;
var window_height = window.innerHeight;

canvas.width = window_width;
canvas.height = window_height;
let hit_counter = 0;

// object is created using class
class Circle {
  constructor(xpos, ypos, radius, speed, color, text) {
    this.position_x = xpos;
    this.position_y = ypos;
    this.radius = radius;
    this.speed = speed;
    this.dx = 1 * this.speed;
    this.dy = 1 * this.speed;
    this.text = text;
    this.color = color;
  }

  // creating circle
  draw(context) {
    context.beginPath();
    context.strokeStyle = this.color;
    context.fillText(this.text, this.position_x, this.position_y);
    context.textAlign = "center";
    context.textBaseline = "middle"
    context.font = "20px Arial";
    context.lineWidth = 5;
    context.arc(this.position_x, this.position_y, this.radius, 0, Math.PI * 2);
    context.stroke();
    context.closePath();
  }

  update() {
    this.text = hit_counter;
    context.clearRect(0, 0, window_width, window_height)
    this.draw(context);

    if ((this.position_x + this.radius) > window_width) {
      this.dx = -this.dx;
      hit_counter++;
    }

    if ((this.position_x - this.radius) < 0) {
      this.dx = -this.dx;
      hit_counter++;
    }

    if ((this.position_y - this.radius) < 0) {
      this.dy = -this.dy;
      hit_counter++;
    }

    if ((this.position_y + this.radius) > window_height) {
      this.dy = -this.dy;
      hit_counter++;
    }

    this.position_x += this.dx;
    this.position_y += this.dy;
  }
}

let my_circle = new Circle(100, 100, 50, 3, 'Black', hit_counter);

let updateCircle = function() {
  requestAnimationFrame(updateCircle);
  my_circle.update();

}

updateCircle();

//for color
function changeColor(event) {
  var coloorr = event.value;
  canvas.style.background = coloorr;

}
function split() {
 

}

<button onclick="split()">SPLIT</button>
<canvas id="canvas"></canvas>

JS 在函数拆分中，我试图在不删除移动圆圈的情况下添加拆分背景，但它显示错误请回答如何做到这一点？ 这样的背景split background

let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
// for canvas size
var window_width = window.innerWidth;
var window_height = window.innerHeight;

canvas.width = window_width;
canvas.height = window_height;
let hit_counter = 0;

// object is created using class
class Circle {
  constructor(xpos, ypos, radius, speed, color, text) {
    this.position_x = xpos;
    this.position_y = ypos;
    this.radius = radius;
    this.speed = speed;
    this.dx = 1 * this.speed;
    this.dy = 1 * this.speed;
    this.text = text;
    this.color = color;
  }

  // creating circle
  draw(context) {
    context.beginPath();
    context.strokeStyle = this.color;
    context.fillText(this.text, this.position_x, this.position_y);
    context.textAlign = "center";
    context.textBaseline = "middle"
    context.font = "20px Arial";
    context.lineWidth = 5;
    context.arc(this.position_x, this.position_y, this.radius, 0, Math.PI * 2);
    context.stroke();
    context.closePath();
  }

  update() {
    this.text = hit_counter;
    context.clearRect(0, 0, window_width, window_height)
    this.draw(context);

    if ((this.position_x + this.radius) > window_width) {
      this.dx = -this.dx;
      hit_counter++;
    }

    if ((this.position_x - this.radius) < 0) {
      this.dx = -this.dx;
      hit_counter++;
    }

    if ((this.position_y - this.radius) < 0) {
      this.dy = -this.dy;
      hit_counter++;
    }

    if ((this.position_y + this.radius) > window_height) {
      this.dy = -this.dy;
      hit_counter++;
    }

    this.position_x += this.dx;
    this.position_y += this.dy;
  }
}

let my_circle = new Circle(100, 100, 50, 3, 'Black', hit_counter);

let updateCircle = function() {
  requestAnimationFrame(updateCircle);
  my_circle.update();

}

updateCircle();

//for color
function changeColor(event) {
  var coloorr = event.value;
  canvas.style.background = coloorr;

}
function split() {
 //In function split I am trying to add split background without removing the moving circle //but it showing errors please answer how to do that?

}

HTML 在功能拆分中，我尝试添加拆分背景而不删除移动的圆圈，但它显示错误请回答如何做到这一点？

<button onclick="split()">SPLIT</button>
<canvas id="canvas"></canvas>

Answer 1

将清除画布移出 Circle 的更新功能，当您想要绘制分割背景时，请这样做而不是清除画布。 （请参阅新重命名的 redraw 函数。）

var window_width = 500;
var window_height = 500;

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

canvas.width = window_width;
canvas.height = window_height;

let hit_counter = 0;
let enableSplit = false;

// object is created using class
class Circle {
  constructor(xpos, ypos, radius, speed, color, text = "") {
    this.position_x = xpos;
    this.position_y = ypos;
    this.radius = radius;
    this.speed = speed;
    this.dx = 1 * this.speed;
    this.dy = 1 * this.speed;
    this.color = color;
  }

  // creating circle
  draw(context) {
    context.beginPath();
    context.fillStyle = this.color;
    context.strokeStyle = this.color;
    context.fillText(this.text, this.position_x, this.position_y);
    context.textAlign = "center";
    context.textBaseline = "middle";
    context.font = "20px Arial";
    context.lineWidth = 5;
    context.arc(this.position_x, this.position_y, this.radius, 0, Math.PI * 2);
    context.stroke();
    context.closePath();
  }

  update() {
    this.text = hit_counter;
    this.draw(context);

    if (this.position_x + this.radius > window_width) {
      this.dx = -this.dx;
      hit_counter++;
    }

    if (this.position_x - this.radius < 0) {
      this.dx = -this.dx;
      hit_counter++;
    }

    if (this.position_y - this.radius < 0) {
      this.dy = -this.dy;
      hit_counter++;
    }

    if (this.position_y + this.radius > window_height) {
      this.dy = -this.dy;
      hit_counter++;
    }

    this.position_x += this.dx;
    this.position_y += this.dy;
  }
}

let my_circle = new Circle(100, 110, 50, 3, "black");

let redraw = function () {
  requestAnimationFrame(redraw);
  if (enableSplit) {
    context.fillStyle = "red";
    context.fillRect(0, 0, window_width / 2, window_height);
    context.fillStyle = "blue";
    context.fillRect(window_width / 2, 0, window_width / 2, window_height);
  } else {
    context.clearRect(0, 0, window_width, window_height);
  }
  my_circle.update();
};

redraw();

function split() {
  enableSplit = !enableSplit;
}

<button onclick="split()">SPLIT</button>
<br />
<canvas id="canvas"></canvas>