Должно получиться что-то типа шкалы с делениями.
Деления двигаются справа налево, как только крайнее деление доходит до края холста, то оно должно исчезнуть и появиться справа. Но исчезают все деления, и появляются справа. Подскажите что можно сделать.[JS][JS]
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>...</title>
</head>
<body>
<script type="text/javascript">
var canvas = document.createElement('canvas');
canvas.id = 'canvas';
canvas.style.border = 'double black 4px';
document.body.appendChild(canvas)
var cnvWidth = canvas.width = window.innerWidth-30;
var cnvHeight = canvas.height = window.innerHeight-30;
var ctx = canvas.getContext('2d');
function Shkale(c, x) {
var self = this;
this.x = x;
Shkale.prototype.gorLine = function() {
c.beginPath();
c.strokeStyle = '#396';
c.moveTo(0, cnvHeight/2);
c.lineTo(cnvWidth, cnvHeight/2);
c.stroke();
};
Shkale.prototype.verLine = function() {
for (var i = 0; i < cnvWidth; i += 45) {
c.beginPath();
c.strokeStyle = '#00f';
c.moveTo(this.x + i, cnvHeight/2 - 50);
c.lineTo(this.x + i, cnvHeight/2 + 50);
c.stroke();
}
};
};
var shkale = new Shkale(ctx, 50);
function move() {
ctx.clearRect(0, 0, cnvWidth, cnvHeight);
shkale.gorLine();
shkale.verLine();
shkale.x -= 2
if (shkale.x < 0) {
shkale.x = cnvWidth
};
requestAnimationFrame(move);
console.log(shkale.x);
};
move();
</script>
</body>
</html>