我想增加和減少圓圈內數字的字體大小和亮度。 怎么做？

Question

 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(); } //I want to increase and decrease the font size and brightness of number inside the circle. How to do that? // 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(); } //I want to increase and decrease the font size and brightness of number inside the circle. How to do that? // drawing the circle from two pieces draw(ctx) { this.drawFill({ ctx }) this.drawOutline({ ctx }) } //I want to increase and decrease the font size and brightness of number inside the circle. How to do that? // color change function setColor({ outline, fill }) { this.color = outline this.fillColor = fill } //I want to increase and decrease the font size and brightness of number inside the circle. How to do that? 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; } } //I want to increase and decrease the font size and brightness of number inside the circle. How to do that? const my_circle = new Circle(100, 100, 50, 3, 'Black'); const updateCircle = function(ctx) { requestAnimationFrame(() => updateCircle(ctx)); my_circle.update(ctx); } updateCircle(context); document.getElementById("inc").addEventListener("click", increment); function increment() { //I want to increase and decrease the font size and brightness of number inside the circle. How to do that? } document.getElementById("dec").addEventListener("click", decrement); function decrement() { //I want to increase and decrease the font size and brightness of number inside the circle. How to do that? } document.getElementById("bri").addEventListener("click", briincrement); function briincrement() { //I want to increase and decrease the font size and brightness of number inside the circle. How to do that? } document.getElementById("bridec").addEventListener("click", bridecrement); function bridecrement() { //I want to increase and decrease the font size and brightness of number inside the circle. How to do that? }

 <button id="inc">Font +</button> <button id="dec">Font -</button> <button id="bri">Font brightness +</button> <button id="bridec">Font brightness -</button> <canvas id="canvas"></canvas>

Answer 1

從您自己的代碼中可以看出，寫入 canvas 的文本大小由.font屬性控制。

ctx.font = "20px Arial";

所以為了改變字體大小，我們需要改變字符串中的 20。 這可以通過使其成為您的圓 class 的 class 變量來完成：

this.fontSize = 20;

並且drawOutline()方法需要稍作修改才能使用此變量：

ctx.font = this.fontSize + "px Arial";

現在您所要做的就是使用相應的按鈕來改變 Circle 實例的 fontSize 的值：

document.getElementById("inc").addEventListener("click", increment);
function increment() {
    my_circle.fontSize++;
}

document.getElementById("dec").addEventListener("click", decrement);
function decrement() {
    if (my_circle.fontSize - 1 >= 0) {
        my_circle.fontSize--;
    }
}

字體的亮度可以用類似的方式控制。 為簡單起見，讓我們使用 CanvasRenderingContext2D .globalAlpha屬性，它控制繪圖操作的不透明度。 讓我們給您的 class 另一個屬性：

this.textAlpha = 1.0;

文本是使用.fillText()方法編寫的。 這意味着我們需要在寫入文本之前修改全局 alpha，然后將其重置為 1：

ctx.globalAlpha = this.textAlpha;
ctx.fillText(this.text, this.position_x, this.position_y);
ctx.globalAlpha = 1;

在為亮度按鈕添加類似的邏輯之后，我們會想出這個：

 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.fontSize = 20; this.textAlpha = 1.0; 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.globalAlpha = this.textAlpha; ctx.fillText(this.text, this.position_x, this.position_y); ctx.globalAlpha = 1; ctx.textAlign = "center"; ctx.textBaseline = "middle" ctx.font = this.fontSize + "px Arial"; ctx.lineWidth = 5; ctx.arc(this.position_x, this.position_y, this.radius, 0, Math.PI * 2); ctx.stroke(); ctx.closePath(); } //I want to increase and decrease the font size and brightness of number inside the circle. How to do that? // 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(); } //I want to increase and decrease the font size and brightness of number inside the circle. How to do that? // drawing the circle from two pieces draw(ctx) { this.drawFill({ ctx }) this.drawOutline({ ctx }) } //I want to increase and decrease the font size and brightness of number inside the circle. How to do that? // color change function setColor({ outline, fill }) { this.color = outline this.fillColor = fill } //I want to increase and decrease the font size and brightness of number inside the circle. How to do that? 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; } } //I want to increase and decrease the font size and brightness of number inside the circle. How to do that? const my_circle = new Circle(100, 100, 50, 3, 'Black'); const updateCircle = function(ctx) { requestAnimationFrame(() => updateCircle(ctx)); my_circle.update(ctx); } updateCircle(context); document.getElementById("inc").addEventListener("click", increment); function increment() { my_circle.fontSize++; } document.getElementById("dec").addEventListener("click", decrement); function decrement() { if (my_circle.fontSize - 1 >= 0) { my_circle.fontSize--; } } document.getElementById("bri").addEventListener("click", briincrement); function briincrement() { if (my_circle.textAlpha + 0.1 <= 1) { my_circle.textAlpha += 0.1; } } document.getElementById("bridec").addEventListener("click", bridecrement); function bridecrement() { if (my_circle.textAlpha - 0.1 >= 0) { my_circle.textAlpha -= 0.1; } }

 <button id="inc">Font +</button> <button id="dec">Font -</button> <button id="bri">Font brightness +</button> <button id="bridec">Font brightness -</button> <canvas id="canvas"></canvas>