>source

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에서 절대 속성으로 위치를 지정할 수 있습니다.

    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();

    .container{
    position:absolute;
    }
    .container .buttons{
      position: absolute;
      top:0px;
      padding:0.5rem;
    }
    .container .buttons button{
      background:transparent;
      padding:0.5rem;
    }

    <div class="container">    <div class="buttons">      <button>ex1</button>      <button>ex2</button>      <button>ex3</button>      <button>ex4</button>      <button>ex5</button>      <button>ex6</button>      <button>ex7</button>      <button>ex8</button>    </div>    <canvas id="canvas"></canvas>   </div>

  • 이전 python : 행을 추가할 때 dtype이 object로 변경되는 이유는 무엇입니까?
  • 다음 python : Abaqus는 표면을 세트로 바꿉니다.