Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
maximillianck
0 / 0 / 0
Регистрация: 03.09.2015
Сообщений: 1
#1

Хочу применить <canvas> html5 для страницы - не выходит

03.09.2015, 15:40. Просмотров 202. Ответов 0
Метки нет (Все метки)

Хочу применить <canvas> для страницы, так, чтобы эффект матрицы был на фоне, а на верху картинки меню и прочее. Но ничего не выходит: ставлю <canvas id="q"> </canvas> вверху, матрица тогда вверху а остальное внизу за матрицей, если наоборот в конец поставить, то всё наоборот матрица внизу, а картинка вверху. Вот ссылка как хотелось бы: http://warwolf.org/404
Вот мой код
PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!Document html>
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>СЕО продвижение РекордТехно</title>
<meta name="keywords" content="тянем сео" />
<!--
body {height:100%;margin:0; padding:0;background:#FFF url(/static/pole.jpg) no-repeat center center fixed; 
-moz-background-size:cover; /* растягиваю изображение по размерам окна для браузера Firefox 3.6 */
-o-background-size:102% auto; /* растягиваю изображение по размерам окна для браузера Opera 9.5 */
-webkit-background-size:102% auto; /* растягиваю изображение по размерам окна для браузера Safari 3.0 */
}-->
<style type="text/css">
html {height: 100%;}
a {color:#00538a;text-decoration:none}
a:hover {color:#0E1D34;text-decoration:none}
@media only screen and (max-width: 1000px) {body {background:efefef !important}}
</style>
 
</head>
<body>
<!--<body style="background-color:#efefef">-->
<!--<body style="background-image: url(/static/pole.jpg);">
<!--<img src="муха.jpg" border="0" alt="" width="480" style="display: block; margin-left: auto; margin-right: auto; margin-top: 20px;">-->
<p>&nbsp;</p>
<p><img src="logoseo1.png" border="0" alt="логотип компании" width="100" style="display: block; margin-left: auto; margin-right: auto; margin-top: 5px;"></p>
<p style="text-align: center; font-size: 18px; margin-bottom: 50px"><a href="http://rekordtehno.ru" title="Вернуться на Главную">Главная</a> | <a href="seokontakti.html" title="Контакты">Контакты</a></p> 
<p style="text-align: center; line-height: 2.0; color: #a2add0; font-family: Verdana; font-size:20px;">
    Мы тянем сео сами. Если хочешь помочь - свяжись с нами.
</p> 
<p><img src="repkan1.jpg" border="0" alt="seo" title="нас мало, но мы в тельняшках!" width="600" style="display: block; margin-left: auto; margin-right: auto; margin-top: 20px;"></p></div>
</body>
</html>
А это canvas со скриптом:
PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<canvas id="q"> </canvas>
<script>
  var width = q.width = 2200;
  var height = q.height = 1300;
  var letters = Array(256).join(1).split('');
 
  var draw = function () {
    q.getContext('2d').fillStyle='rgba(0,0,0,.05)';
    q.getContext('2d').fillRect(0,0,width,height);
    q.getContext('2d').fillStyle='#0F0';
    letters.map(function(y_pos, index){
      text = String.fromCharCode(65+Math.random()*33);
      x_pos = index * 10;
      q.getContext('2d').fillText(text, x_pos, y_pos);
      letters[index] = (y_pos > 758 + Math.random() * 1e4) ? 0 : y_pos + 10;
    });
  };
  setInterval(draw, 33);
</script>
Как реализовать укажите, покажите, а то я только учусь и инфы не хватает, но предполагаю что здесь нет сложностей - я просто чегота не знаю, не понимаю.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
03.09.2015, 15:40
Ответы с готовыми решениями:

HTML5 (canvas)
Рисую на canvas такое изображение. Как можно сделать, чтобы пр нажатии на прямоугольник открывалось...

HTML5 Canvas Диограмма
пытаюсь нарисовать диаграмму. Нарисовать круг и залить цветом получается но вот как отделить сектор...

Написание текста используя canvas HTML5
необходимо Написать две буквы &quot;VA&quot;, но без помощи filltext есть у кого какие идеи?

Canvas выходит за рамки div
Подскажите почему canvas выходит за рамки div'a? вот код: https://jsfiddle.net/0z84j6cL/1/ ...

как в canvas или другими способами HTML5 создать кнопку с эффектами?
Эффекты внутренняя тень, внутреннее свечение. Пример кнопки в картинке.

0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
03.09.2015, 15:40

Что лучше подойдет при использовании HTML5 SVG или Canvas в моем случае?
Собираюсь создать онлайн игру. Так вот графическая часть( Игра аналог TowerDefence) Количество...

Текст выходит за пределы страницы
Подскажите пожалуйста, что можно сделать: я закинул с Excel таблицу с данными на html страницу,...

В мобильной версии слайдер выходит за рамки страницы
В мобильной версии слайдер выходит за рамки сайта, и из за этого весь сайт съезжает. Подскажите в...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
1
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru