0
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>Mayatnik</title>

<h1 style = 'text-align: center'> Маятник </h1>
<hr>

<div id="center">
<canvas id="canvas" width="600" height="600"></canvas>
<input type="range" list="slider">
<datalist id = "slider" min = "0" max="360" name "range" value "360" step "1" data-  orieentation="vertical">
</datalist>
<h2 style='text-align: center'>Изменение угла вращения</h2>
</div>
<head>
<script type = "text/javascript">
  var canvas = document.getElementById("canvas");
  var ctx = canv.getContext("2d");
  function draw()
  {
    var canvas = document.getElementById("canvas");
    if (canvas.getContext) {
    var context = canvas.getContext("2d");

    var size = Math.min (canvas.width, canvas.height);
    var rPend = size * 0.50;
    var rBar = size * 0.005;
    var rBall = size * 0.03;

    context.fillStyle = "rgba(255,255,255,0.51)"
    context.fillRect (0, 0, canvas.width, canvas.height);
    context.fillStyle = "black";
                      context.globalCompositeOperation = "source-over";
    context.save();
    context.translate (canvas.width/2, canvas.height/2);
    context.rect (-rBar, -rBar, rBar*2, rPend+rBar*2);
    context.fill();
    //context.stroke();
    context.beginPath();
    context.arc (0, rPend, rBall, 0, Math.PI*2, false);
    context.fill();
    context.stroke();
    context.restore();
    }

  }

</script>
</head>
<body onload = "draw();">
</body>
</html>

1 ответ 1

0

Указываете id у слайдера

<input id="angleChange" type="range" list="slider">

А это в head

<style>
#canvas {
  display: block;
  margin: 0 auto;
  }

#angleChange {
 display: block;
 margin: 0 auto;
}
  </style>
8
  • спасибо, только получилось выровнять все, кроме самого объекта, он все равно сдвинут 18 апр 2020 в 10:22
  • Должно получится так (imgur.com/a/XckwusJ) 18 апр 2020 в 10:30
  • а вышло вот так imgur.com/a/R6KFpqr 18 апр 2020 в 10:37
  • Думаю, можно попробовать изменить margin на margin-left: 650px у канваса 18 апр 2020 в 10:41
  • подошло 475px, не могли бы вы еще подсказать, при перемещении слайдера влево, маятнику как будто что-то мешает, не знаете что это может быть? 18 апр 2020 в 10:49

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.