avatar

Программа для генерации фона-лабиринта (из двух слешей)

Опубликовал в блог Программирование
Программирование: Программу для генерации фона-лабиринта (из двух слешей)

на Бейсике:

10 PRINT CHR$(205.5+RND(1));: GOTO 10

на Питоне:

import random; while 1: print random.choice(u'╱╲'),

на ПХП:

for(;;) flush(print '/\\'[mt_rand(0, 1)+.5]);

на «канвасе»:

!function© {
    var ctx = document.getCSSCanvasContext ? 
        document.getCSSCanvasContext("2d", "maze", c.width, c.height):
        c.getContext("2d");
    ctx.font      = "10px monospace";
    ctx.fillStyle = '#36f';
    ctx.fillRect(0, 0, c.width, c.height);
    ctx.fillStyle = '#068';
    for (var y = 7, ly = c.height; y < ly; y += 8) {
        for (var x = -1, lx = c.width; x < lx; x+= 4) {
            ctx.fillText("/\".charAt(Math.random() + .5), x, y);
        }
    }
    if (!document.mozSetImageElement && !document.getCSSCanvasContext) {
        document.getElementsByTagName('body')[0].style.backgroundImage='url(' + c.toDataURL("image/png") + ')';
    }
}(document.getElementById('maze'));

© Евгений Степанищев
Программирование: Программу для генерации фона-лабиринта (из двух слешей)
В первой строке проверяется наличие метода «getCSSCanvasContext», он работает только в браузерах, основанных на WebKit (Хром и Сафари) и позволяет напрямую использовать «канвас» для задника, нужно только в CSS указать идентификатор:
body { background: -webkit-canvas(maze); }

Если этот метод недоступен, рисуем в скрытый тег «канваса», который есть на странице. Выводим те же символы, которые использовались в Бейсике.

Связь «канваса» и задника для браузеров на «Геко» (ФайрФокса и менее известных) в Джаваскрипте не видна, она полностью на стороне CSS:

body { background: -moz-element(#maze); }

Эти браузеры позволяют указать в качестве задника что угодно — хоть IFRAME, был бы у него идентификатор. Соответственно, «maze» — идентификатор моего «канваса». Делать больше ничего не нужно, любой элемент с этим «айди» размножится в качестве фона.

В последних строках — проверка: доступен ли метод для указания «-moz-element», нет ли метода для рисования «канвасом» прямо в задник, если нет, то перевод картинки из «канваса» в dataURI и добавление её в таком виде на фон тега BODY. Код работает и для «Оперы» с «Эксплорером» (начиная с девятого).

Также стоит подобрать шрифт, где слеши перпендикулярны друг другу. Или вместо слешей использовать такие символы: «╱» и «╲».

0 комментариев RSS
Нет комментариев
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.