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 = 200;
var y = 100;
// обозначим координаты движения мышки
var myX;
var myY;
var stepCount = 0; // кол-во шагов, которые сделала точка в одном направлении
var direction; // направление движения: 0 - вверх, 1 - вправо, 2 - вниз, 3 - влево
var timer; // таймер
// Нарисуем точку
function drawDot() {
ctx.clearRect(0, 0, 400, 200); // очищаем canvas при каждом запуске функции
if(stepCount == 0) {
stepCount = Math.floor(15*Math.random()); // генерируем кол-во шагов в каком-то направлении
direction = Math.floor(8*Math.random()); // генерирует значение от 0 до 7
}
else {
stepCount--;
}
// зададим направление по осям и по диагоналям
switch(direction) {
case 0: // движение вверх
y = y-1;
break;
case 1: // движение вправо
x = x+1;
break;
case 2: // движение вниз
y = y+1;
break;
case 3: // движение влево
x = x-1;
break;
case 4: // вправо вверх
x = x+1;
y= y-1;
break;
case 5: // вправо вниз
x = x+1;
y= y+1;
break;
case 6: // влево вниз
x = x-1;
y= y+1;
break;
case 7: // влево вверх
x = x-1;
y= y-1;
break;
}
// Если точка подходит к краю canvas, обнулим. Чтобы герой не выходил за переделы.
if(x<0 || x>400 || y<0 || y>200) stepCount = 0;
ctx.fillRect(x-3, y-3, 6, 6); // нарисуем прямоугольник
ctx.beginPath(); // начнем путь
ctx.moveTo(x,y); // переместим перо в точку, где находится точка
ctx.lineTo(myX, myY);
ctx.stroke();
timer = setTimeout(drawDot, 100);
}
drawDot();
canvas.onmousemove = function(event) {
myX = event.offsetX;
myY = event.offsetY;
}
<!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 = 200;
var y = 100;
// обозначим координаты движения мышки
var myX;
var myY;
var stepCount = 0; // кол-во шагов, которые сделала точка в одном направлении
var direction; // направление движения: 0 - вверх, 1 - вправо, 2 - вниз, 3 - влево
var timer; // таймер
// Нарисуем точку
function drawDot() {
ctx.clearRect(0, 0, 400, 200); // очищаем canvas при каждом запуске функции
if(stepCount == 0) {
stepCount = Math.floor(15*Math.random()); // генерируем кол-во шагов в каком-то направлении
direction = Math.floor(8*Math.random()); // генерирует значение от 0 до 7
}
else {
stepCount--;
}
// зададим направление по осям и по диагоналям
switch(direction) {
case 0: // движение вверх
y = y-1;
break;
case 1: // движение вправо
x = x+1;
break;
case 2: // движение вниз
y = y+1;
break;
case 3: // движение влево
x = x-1;
break;
case 4: // вправо вверх
x = x+1;
y= y-1;
break;
case 5: // вправо вниз
x = x+1;
y= y+1;
break;
case 6: // влево вниз
x = x-1;
y= y+1;
break;
case 7: // влево вверх
x = x-1;
y= y-1;
break;
}
// Если точка подходит к краю canvas, обнулим. Чтобы герой не выходил за переделы.
if(x<0 || x>400 || y<0 || y>200) stepCount = 0;
ctx.fillRect(x-3, y-3, 6, 6); // нарисуем прямоугольник
ctx.beginPath(); // начнем путь
ctx.moveTo(x,y); // переместим перо в точку, где находится точка
ctx.lineTo(myX, myY);
ctx.stroke();
timer = setTimeout(drawDot, 100);
}
drawDot();
canvas.onmousemove = function(event) {
myX = event.offsetX;
myY = event.offsetY;
}
Комментариев нет:
Отправить комментарий