改变圆圈内的颜色

Question

我想改变圆圈内的颜色示例：（两种颜色）从红色到蓝色和从蓝色到红色。
我用 if else 试过这个，但它对我不起作用。

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;

}

// I tried it in bllk function but it didn't work for me.     
function bllk() {
  canvas.style.background = "black";
  context.fillStyle = "blue";
  // I tried it in bllk function but it didn't work for me.
  // setInterval(() => {
  //     if(context.fillStyle=="blue"){
  //         context.fillStyle=red;
  //         context.fill();
  //     }else if(context.fillStyle=="red"){
  //         context.fillStyle=blue;
  //         context.fill();
  //     }else if(context.fillStyle=="blue"){
  //         context.fillStyle=red;
  //         context.fill();
  //     }
  // }, 1000);

}

<!-- On clicking button Hi How to apply two color one by one to the numbers inside the circle ? I tried it in bllk function but it didn't work for me. -->
<button onclick="bllk()">Hi</button>
<canvas id="canvas"></canvas>

Answer 1

代码需要一点升级：

变量与全局解耦space
为圈子添加一些内部属性和方法

现在可以单独更改 canvas 的背景颜色、圆的轮廓和文本以及圆的背景。

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

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

// 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;
    this.fillColor = "white" // added as a default value
    this.hit_counter = 0
  }

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

  // background of the circle
  drawFill({
    ctx,
    color
  }) {
    ctx.beginPath();
    ctx.fillStyle = this.fillColor
    ctx.arc(this.position_x, this.position_y, this.radius, 0, Math.PI * 2);
    ctx.fill();
    ctx.closePath();
  }

  // drawing the circle from two pieces
  draw(ctx) {
    this.drawFill({
      ctx
    })
    this.drawOutline({
      ctx
    })
  }

  // color change function
  setColor({
    outline,
    fill
  }) {
    this.color = outline
    this.fillColor = fill
  }

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

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

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

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

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

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

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

const updateCircle = function(ctx) {
  requestAnimationFrame(() => updateCircle(ctx));
  my_circle.update(ctx);
}

updateCircle(context);

// I tried it in bllk function but it didn't work for me.     
function bllk1() {
  canvas.style.background = "black";
  my_circle.setColor({
    outline: "red",
    fill: "yellow"
  })
}

function bllk() {
  canvas.style.background = "black";
  my_circle.setColor({
    outline: "black",
    fill: "blue"
  })
  setInterval(() => {
    const fill = my_circle.fillColor === "blue" ? "red" : "blue"
    my_circle.setColor({
      outline: "black",
      fill,
    })
  }, 1000);
}

<!-- On clicking button Hi How to apply two color one by one to the numbers inside the circle ? I tried it in bllk function but it didn't work for me. -->
<button onclick="bllk()">Hi</button>
<canvas id="canvas"></canvas>

Answer 2

我简化了你的代码，只关注你在评论中提出的问题：
changing red to blue and blue to red color continuously
为了专注于那个特定的问题，我们不需要 Circle 移动或与边界的碰撞，将来当你问一个问题时你应该做同样的事情，提供一个最小的例子，删除与以下内容无关的所有其他内容你的问题。

为了解决您的问题，我们可以将颜色参数传递给绘制函数，这样我们就可以让它知道要为圆圈和文本使用什么颜色，或者您将来可能想要添加的任何颜色。
请参阅下面的代码示例：

let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
canvas.width = canvas.height = 100;

class Circle {
  draw(xpos, ypos, radius, colors) {
    context.beginPath();
    context.arc(xpos, ypos, radius, 0, Math.PI * 2);   
    context.fillStyle = colors.circle;
    context.fill();
    
    context.beginPath();
    context.font = "20px Arial";
    context.fillStyle = colors.text;
    context.fillText("0", xpos, ypos);  
  }
}

let my_circle = new Circle();
let colors = {text:"red", circle:"blue"};

let updateCircle = function() {
  requestAnimationFrame(updateCircle);
  context.clearRect(0, 0, canvas.width, canvas.height)
  my_circle.draw(50, 50, 20, colors);
}
updateCircle();

setInterval(() => {
  if (colors.text == "blue") {
    colors = {text:"red", circle:"blue"};
  } else {
    colors = {text:"blue", circle:"red"};
  }
}, 1000);

<canvas id="canvas"></canvas>

改变圆圈内的颜色

Change color inside circle

html

javascript

css

canvas

html5-canvas