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="400" height="200"></canvas>
<script src="script.js"></script>
</body>
</html>
style.css
#c1 {
width: 400px;
height: 200px;
border: 3px solid black;
margin: 40px;
background-image: url(setka.png);
}
script.js
var canvas = document.getElementById('c1'); // получим canvas
var ctx = canvas.getContext('2d');
var x = 0;
var timer;
drawSin();
function drawSin() {
y = Math.sin(x);
if(x>=400) {
x = 0;
} else {
x = x + 0.3;
}
ctx.fillRect(5*x, 100+20*y, 2, 2); // сдвинем y на 100 единиц
timer = setTimeout(drawSin, 50); // запуск каждые 50 миллисекунд
}
<!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="400" height="200"></canvas>
<script src="script.js"></script>
</body>
</html>
style.css
#c1 {
width: 400px;
height: 200px;
border: 3px solid black;
margin: 40px;
background-image: url(setka.png);
}
script.js
var canvas = document.getElementById('c1'); // получим canvas
var ctx = canvas.getContext('2d');
var x = 0;
var timer;
drawSin();
function drawSin() {
y = Math.sin(x);
if(x>=400) {
x = 0;
} else {
x = x + 0.3;
}
ctx.fillRect(5*x, 100+20*y, 2, 2); // сдвинем y на 100 единиц
timer = setTimeout(drawSin, 50); // запуск каждые 50 миллисекунд
}
Комментариев нет:
Отправить комментарий