改變圓圈內的顏色

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

代碼需要一點升級：

• 將變量彼此和全局空間解耦
• 向圈子添加一些內部屬性和方法

現在可以更改 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 bllk() { canvas.style.background = "black"; my_circle.setColor({ outline: "red", fill: "yellow" }) }

 <?-- 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
為了專注於該特定問題，我們不需要移動圓圈或與邊界發生碰撞，將來當您提出問題時，您應該做同樣的事情，提供一個最小示例，刪除與你的問題。

為了解決您的問題，我們可以將 colors 參數傳遞給繪圖 function，這樣我們就可以讓它知道 colors 想要為圓圈和文本添加什么，或者您可能想在未來使用什么。
請參閱下面的代碼示例：

 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>