index.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Спирограф</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<canvas id="c1" width="600" height="600"></canvas>
<script src="script.js"></script>
</body>
</html>
style.css
#c1 {
width: 600px;
height: 600px;
border: 3px solid black;
margin: 40px;
}
script.js
var canvas = document.getElementById('c1'); // получим canvas
var ctx = canvas.getContext('2d');
var R = 130;
var r = 140;
var d = 50;
var teta = 0;
var timer;
function spiro() {
var x = (R - r) * Math.cos(teta) + d*Math.cos((R - r) * teta/r);
var y = (R - r) * Math.sin(teta) - d*Math.sin((R - r) * teta/r);
teta = teta + 0.1;
ctx.fillRect(300+x, 300+y, 4, 4);
timer = setTimeout(spiro, 50);
}
spiro();
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Спирограф</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<canvas id="c1" width="600" height="600"></canvas>
<script src="script.js"></script>
</body>
</html>
style.css
#c1 {
width: 600px;
height: 600px;
border: 3px solid black;
margin: 40px;
}
script.js
var canvas = document.getElementById('c1'); // получим canvas
var ctx = canvas.getContext('2d');
var R = 130;
var r = 140;
var d = 50;
var teta = 0;
var timer;
function spiro() {
var x = (R - r) * Math.cos(teta) + d*Math.cos((R - r) * teta/r);
var y = (R - r) * Math.sin(teta) - d*Math.sin((R - r) * teta/r);
teta = teta + 0.1;
ctx.fillRect(300+x, 300+y, 4, 4);
timer = setTimeout(spiro, 50);
}
spiro();
Комментариев нет:
Отправить комментарий