let canvas= document.getElementById("canvas");
let context= canvas.getContext("2d");
//for canvas size
var window_width= window.innerWidth;
var window_height= window.innerHeight;
canvas.style.background="yellow"
canvas.width= window_width;
canvas.height= window_height;
let hit_counter=0;
function randomIntFromInterval(min, max) { //min and max included
return Math.floor(Math.random() * (max -min + 1) + min)
}
class Circle {
constructor(xpos, ypos, radius, color, text) {
this.position_x= xpos;
this.position_y= ypos;
this.radius= radius;
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;
}
if ((this.position_x -this.radius) < 0) {
this.dx= -this.dx;
}
if ((this.position_y -this.radius) < 0) {
this.dy= -this.dy;
}
if ((this.position_y + this.radius) > window_height) {
this.dy= -this.dy;
}
this.position_x += this.dx;
this.position_y += this.dy;
}
}
let my_circle= new Circle(100, 100, 50, 'Black', hit_counter);
my_circle.update();
<button>ex1</button> <button>ex2</button> <button>ex3</button> <button>ex4</button> <button>ex5</button> <button>ex6</button> <button>ex7</button> <button>ex8</button> <canvas id="canvas"></canvas>
HTML 캔버스에서 버튼을 정렬하고 스타일을 지정하는 방법은 무엇입니까? 버튼에 CSS를 추가하려고 했지만 작동하지 않았습니다. 어떻게 해야 하나요? 캔버스 중앙에 버튼을 배치하는 방법은 무엇입니까?
<button>ex1</button> <button>ex2</button> <button>ex3</button> <button>ex4</button> <button>ex5</button> <button>ex6</button> <button>ex7</button> <button>ex8</button><canvas id="canvas"></canvas>
JS 캔버스에서 버튼을 정렬하고 스타일을 지정하는 방법. 버튼에 CSS를 추가하려고 했지만 작동하지 않았습니다. 어떻게 해야 하나요? 캔버스 중앙에 버튼을 배치하는 방법은 무엇입니까?
let canvas= document.getElementById("canvas");
let context= canvas.getContext("2d");
//for canvas size
var window_width= window.innerWidth;
var window_height= window.innerHeight;
canvas.style.background="yellow"
canvas.width= window_width;
canvas.height= window_height;
let hit_counter=0;
function randomIntFromInterval(min, max) { //min and max included
return Math.floor(Math.random() * (max -min + 1) + min)
}
class Circle {
constructor(xpos, ypos, radius, color, text) {
this.position_x= xpos;
this.position_y= ypos;
this.radius= radius;
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;
}
if ((this.position_x -this.radius) < 0) {
this.dx= -this.dx;
}
if ((this.position_y -this.radius) < 0) {
this.dy= -this.dy;
}
if ((this.position_y + this.radius) > window_height) {
this.dy= -this.dy;
}
this.position_x += this.dx;
this.position_y += this.dy;
}
}
let my_circle= new Circle(100, 100, 50, 'Black', hit_counter);
my_circle.update();
- 답변 # 1
컨테이너 내부에 버튼을 넣고 CSS에서 절대 속성으로 위치를 지정할 수 있습니다.