Canvas

Бегущая строка

by alexseroshtan

HTML

<canvas id="canvas"></canvas>

CSS

canvas {
    background: #fff;
    margin: 20px;
}

JavaScript

var context;
var container;
var x = 0;

var horizontalSize = 30;
var verticalSize = 5;

var cellSize = 15;

var cw = (horizontalSize * cellSize) + 1;
var ch = (verticalSize * cellSize) + 1;

var canvas;
var context;

function genArray(n, m) {
    var a = [];
    for (var i = 0; i < n; i++) {
        a[i] = [];
        for (var j = 0; j < m; j++) {
            a[i][j] = 0;
            // console.log("a["+i+"]["+j+"] = 0");
        }
    }
    return a;
}

var string = [
    [0,1,1,1,1,0,1,1,1,0,1,0,0,0,1,0,1,1,1,1,0,1,1,1,0,1,1,1,0],
    [0,1,0,0,1,0,1,0,1,0,1,0,0,1,1,0,1,0,0,1,0,1,0,0,0,0,1,0,0],
    [0,1,0,0,1,0,1,1,1,0,1,0,1,0,1,0,1,1,1,0,0,1,1,1,0,0,1,0,0],
    [0,1,0,0,1,0,1,0,0,0,1,1,0,0,1,0,1,0,0,1,0,1,0,0,0,0,1,0,0],
    [0,1,0,0,1,0,1,0,0,0,1,0,0,0,1,0,1,1,1,1,0,1,1,1,0,0,1,0,0],
];

var curGrid = string;
var newGrid = genArray(horizontalSize, verticalSize);

function drawGrid() {
    canvas = document.getElementById('canvas');

    canvas.width = cw;
    canvas.height = ch;

    context = canvas.getContext('2d');

    context.fillStyle = 'white';
    context.fillRect(0, 0, canvas.width, canvas.height);

    for (var x = 0; x <= cw; x += cellSize) {
        context.moveTo(0.5 + x, 0);
        context.lineTo(0.5 + x, ch);
    }

    for (var y = 0; y <= ch; y += cellSize) {
        context.moveTo(0, 0.5 + y);
        context.lineTo(cw, 0.5 + y);
    }

    context.strokeStyle = 'white';
    context.stroke();
}

function fillCell(n, m) {
    var x = m*cellSize - cellSize + 1;
    var y = n*cellSize - cellSize + 1;
    context.fillStyle = 'red';
    context.fillRect(x, y, cellSize - 1, cellSize - 1);
}

function setup() {
    for (var i = 0; i < string.length; i++) {
        for (var j = 0; j < string[i].length; j++) {
            if (string[i][j] == 1) {
                fillCell(i+1, j+1);
            }
        }
    }
}

function play() {
    setInterval(function() {
        drawGrid();
        newGrid = genArray(curGrid.length, curGrid.length);
       ...