我想增加和减少圆圈内数字的字体大小和亮度。怎么做？
I want to increase and decrease the font size and brightness of number inside the circle. How to do that?
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>
正如您从自己的代码中看到的，写入 canvas 的文本大小由 .font 属性.
控制
ctx.font = "20px Arial";
因此，为了改变字体大小，我们需要改变字符串中的 20。这可以通过使它成为你圈子 class 的 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>
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>
正如您从自己的代码中看到的，写入 canvas 的文本大小由 .font 属性.
ctx.font = "20px Arial";
因此，为了改变字体大小，我们需要改变字符串中的 20。这可以通过使它成为你圈子 class 的 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>