Почему некоторые из моих кнопок не работают правильно на html5 canvas? - PullRequest
Новая
       7

Почему некоторые из моих кнопок не работают правильно на html5 canvas?

0 голосов
/ 04 ноября 2018

Я пытаюсь сделать несколько кнопок для управления некоторыми вещами на моем холсте. Я хочу, чтобы они появлялись в правой части холста, поэтому я использую CSS для стилизации и перемещения. Я также сделал таймер, который включается при нажатии зеленой кнопки START и останавливается при нажатии FINISH. Моя проблема в том, что первые кнопки не работают или не нажимаются, когда я перехожу в правильное положение. У вас есть идеи, почему это происходит? Вот часть моего кода, которая делает то, что я говорю. Заранее спасибо !!! 

document.body.style.backgroundColor = "#FAFAD2";

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

window.requestAnimFrame = (function(callback) {
  return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
    window.setTimeout(callback, 1000 / 60);
  };
})();

var startTime = Date.now();
var t;
var timer_is_on = 0;

function timedCount() {
  var elapsedTime = Date.now() - startTime;
  document.getElementById("timer").innerHTML = (elapsedTime / 1000).toFixed(3);
  t = setTimeout("timedCount()", 100);
}

function doTimer() {
  if (!timer_is_on) {
    timer_is_on = 1;
    timedCount();
  }
}

function stopCount() {
  clearTimeout(t);
  timer_is_on = 0;
}

$('#start').on('click', function() {
  doTimer();
});

$('#finish').on('click', function() {
  stopCount();
});
.timer {
  position: absolute;
  bottom: 55px;
  left: 600px;
}

.both,
.one,
.two,
.timer {
  display: block;
  padding: 30px;
  position: absolute;
  left: 600px;
}

.both button {
  background-color: #4CAF50;
  border: 1px solid black;
  margin-left: 50px;
  color: white;
  padding: 15px 10px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  width: 100px;
  display: block;
  position: relative;
  bottom: 20px;
}

.one button {
  border: 1px solid black;
  color: white;
  padding: 15px 5px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  width: 200px;
  display: block;
  position: relative;
  top: 100px;
}

.two button {
  border: 1px solid black;
  color: white;
  padding: 15px 5px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  width: 200px;
  display: block;
  position: relative;
  top: 300px;
}

.timer button {
  background-color: #696969;
  border: 1px solid black;
  color: white;
  padding: 12px 8px;
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  width: 80px;
}
<!DOCTYPE html>
<html>

<head>
  <title> Simulation </title>

</head>

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <div class='both'>
    <button type='button' id='start'>START</button>
    <button type='button' id='stop'>STOP</button>
  </div>
  <div class='one'>
    <button type='button' id='start1' style='background-color:#B22222;'>START 1</button>
    <button type='button' id='stop1' style='background-color:#B22222;'>STOP 1</button>
    <button type='button' id='position1' style='background-color:#B22222;'>POSITION 1</button>
  </div>
  <div class='two'>
    <button type='button' id='start2' style='background-color:#FFD700;'>START 2</button>
    <button type='button' id='stop2' style='background-color:#FFD700;'>STOP 2</button>
    <button type='button' id='position2' style='background-color:#FFD700;'>POSITION 2</button>
  </div>
  <div class='timer'>
    <span id="timer"></span> sec
    <button type='button' id='finish'>FINISH</button>
  </div>
  <br>
  <canvas id="myCanvas" width="455" height="650" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas>



</body>

</html>

Ответы [ 2 ]

0 голосов
/ 04 ноября 2018

попробуйте добавить z-index в оболочку кнопки и относительную позицию для canvas

.both {z-index:99;} canvas{position:relative;z-index:10;}

0 голосов
/ 04 ноября 2018

Ваш код не работает, потому что вы пытаетесь установить время ожидания для строки, а не для функции: 

function timedCount() {
  var elapsedTime = Date.now() - startTime;
  document.getElementById("timer").innerHTML = (elapsedTime / 1000).toFixed(3);
  t = setTimeout("timedCount()", 100);
}

Изменить эту строку: 

t = setTimeout(timedCount, 100);

И это должно работать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...