<!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 ответ
Указываете id у слайдера
<input id="angleChange" type="range" list="slider">
А это в head
<style>
#canvas {
display: block;
margin: 0 auto;
}
#angleChange {
display: block;
margin: 0 auto;
}
</style>
-
спасибо, только получилось выровнять все, кроме самого объекта, он все равно сдвинут 18 апр 2020 в 10:22
-
-
-
Думаю, можно попробовать изменить margin на margin-left: 650px у канваса 18 апр 2020 в 10:41
-
подошло 475px, не могли бы вы еще подсказать, при перемещении слайдера влево, маятнику как будто что-то мешает, не знаете что это может быть? 18 апр 2020 в 10:49