如何在 canvas 中排列和设置按钮样式？

Question

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 如何在 canvas 中排列和设置按钮样式？我尝试将 CSS 添加到按钮，但它对我不起作用。该怎么做？如何在 canvas 的中心排列按钮？

<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 如何在 canvas 中排列和设置按钮样式。我尝试将 CSS 添加到按钮，但它对我不起作用。该怎么做？如何在 canvas 的中心排列按钮？

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

Answer 1

您可以将按钮放在容器内，并使用绝对属性 in 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>

如何在 canvas 中排列和设置按钮样式？

How to arrange and style buttons in canvas?

html

javascript

css

canvas

html5-canvas