我想增加和减少圆圈内数字的字体大小和亮度。 怎么做？

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

As you can see from your own code, the size of text written onto a canvas is controlled by the .font property.

ctx.font = "20px Arial";

So in order to change the font size we need to alter the 20 inside the string. This can be done by making it a class variable of your circle class:

this.fontSize = 20;

and the drawOutline() method needs a little modification to take use of this variable:

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

Now all you have to do is vary the value of fontSize of a Circle instance using the corresponding buttons:

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--;
    }
}

The brightness of the font can be controlled in a similar way. For simplicity let's use the CanvasRenderingContext2D .globalAlpha property, which controls the opacity of drawing operations. Let's give your class another propety:

this.textAlpha = 1.0;

Text is written using the .fillText() method. That means we need to modify the global alpha just before writing text and reset it to 1 afterwards:

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

After adding a similar logic for the brightness buttons we'll come up with this:

 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>