Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 15.01.2011, 20:03
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

DyadkaSashka, мой первый пример делает примерно тоже самое:
x-yuri, после запуска вашего примера мой сафари лапки поднял, так и не показав задуманное
<script type="text/javascript">
window.onload = function(){
    var i = 0;
    (function(){
         if(++i <= document.documentElement.clientHeight){
             var element = document.createElement('div');
             element.style.cssText = 'top:'+i+'px; left:'+i+'px';
             document.body.appendChild(element);
             setTimeout(arguments.callee, 10);
         }
    })();
};
</script>

<style type="text/css">
body {background: red;}
div {
    background: blue;
    position: absolute;
    color: white;
    text-align: center;
    width: 1000px;
    height: 50px;
}
</style>
<div></div>

Последний раз редактировалось monolithed, 15.01.2011 в 20:06.
Ответить с цитированием
  #12 (permalink)  
Старый 15.01.2011, 20:15
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

monolithed, под windows? Странно, мой подумал, но решил не поднимать, сорри
Ответить с цитированием
  #13 (permalink)  
Старый 15.01.2011, 20:30
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

Сообщение от x-yuri
под windows?
ага
Ответить с цитированием
  #14 (permalink)  
Старый 15.01.2011, 20:38
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

ну вот уменьшенный в два раза (осторожно, браузер может уйти в себя и не вернуться)
<!DOCTYPE HTML>
<html>
  <head>   
  </head>
  <body>   

  <style type="text/css">
    div {
      width: 1px;
      height: 1px;
      overflow: hidden;
      float: left;
    }
  </style>

  <script>

  for( var j=0; j<128; j+=2 )
    for( var k=j; k<j+128; k+=2 ){
      var div = document.createElement('div');
      div.style.background = 'rgb('+[0,0,k].join(',')+')';
      if( k == j )
        div.style.clear = 'left';
      document.body.appendChild( div );
    }

  </script>


  </body>
</html>

Последний раз редактировалось x-yuri, 16.01.2011 в 05:09.
Ответить с цитированием
  #15 (permalink)  
Старый 15.01.2011, 21:52
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,590

Мне ff четырежды предложил остановить скрипт, но цуко не останавливал)
Ответить с цитированием
  #16 (permalink)  
Старый 15.01.2011, 22:12
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

ага, даже при уменьшенном размере, думаю, что можно без вложенных циклов обойтись, только одним: -?
мой предпоследний пример с художествами и то не грузит так проц..
Ответить с цитированием
  #17 (permalink)  
Старый 15.01.2011, 22:16
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,590

Зато изображение отрисованное таким образом хорошо жмётся в пнг.)
Говорю по личному опыту: когда-то в молодости, когда о canvas и слыхом не слыхивал понадобилось отрисовать мне хитрую генерировану картинку. 256*256px(дивов)=)
Ответить с цитированием
  #18 (permalink)  
Старый 15.01.2011, 22:25
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

ну извините
Сообщение от monolithed
даже при уменьшенном размере, думаю, что можно без вложенных циклов обойтись,
как? Да и толку, если ты все так же собираешься нарисовать 128x128 дивов

прикрепил, результат во вложении

p.s. а может в опере запуститься?
Изображения:
Тип файла: png Untitled-3.png (178 байт, 35 просмотров)
Ответить с цитированием
  #19 (permalink)  
Старый 15.01.2011, 23:00
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

Сообщение от x-yuri
p.s. а может в опере запуститься
я в сафари посмотрел после 5 попытки ))
Ответить с цитированием
  #20 (permalink)  
Старый 16.01.2011, 05:07
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

а вот градиент, нарисованный с помощью canvas и однопиксельного изображения
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <canvas id="canvas" width="64" height="64"></canvas>
    <script type="text/javascript">
        var tmpCtx = document.getElementById('canvas').getContext('2d');
        var img = new Image();
        img.onload = function(){
            for( var i=0; i<64; i++ )
                for( var j=i; j<i+64; j++ )
                    tmpCtx.drawImage(this, j, 0, 1, 1, j-i, i, 1, 1);
        };
        img.src = 'http://javascript.ru/forum/attachment.php?attachmentid=645&stc=1&d=1295143633';
    </script>
</body>
</html>


Сообщение от x-yuri
под windows?
Сообщение от monolithed
ага
ну они за safari под windows меньше следят

и, наконец... сферический градиент в вакууме
промежуточный вариант:
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <canvas id="canvas" width="128" height="128"></canvas>
    <script type="text/javascript">
        var ctx = document.getElementById('canvas').getContext('2d');
        var img = new Image();
        img.onload = function(){
            for( var r=0; r<img.width; r++ )
                for( var phi=0; phi<2*Math.PI; phi++ )
                    ctx.drawImage(this, r, 0, 1, 1, 64+r*Math.cos(phi), 64+r*Math.sin(phi), 1, 1);
        };
        img.src = 'http://javascript.ru/forum/attachment.php?attachmentid=647&stc=1&d=1295146484';
    </script>
</body>
</html>

окончательный:
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <canvas id="canvas" width="128" height="128"></canvas>
    <script type="text/javascript">
        var ctx = document.getElementById('canvas').getContext('2d');
        var img = new Image();
        img.onload = function(){
            for( var y=0; y<128; y++ )
                for( var x=0; x<128; x++ ){
                    var r = Math.round(
                        Math.sqrt(Math.pow(x-64, 2) + Math.pow(y-64, 2))
                    );
                    if( r < 64 )
                        ctx.drawImage(this, r, 0, 1, 1, x, y, 1, 1);
                }
        };
        img.src = 'http://javascript.ru/forum/attachment.php?attachmentid=647&stc=1&d=1295146484';
    </script>
</body>
</html>
Изображения:
Тип файла: png 14.png (228 байт, 11 просмотров)
Тип файла: png 14-3.png (185 байт, 37 просмотров)

Последний раз редактировалось x-yuri, 16.01.2011 в 05:55.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Срезание дива по диагонали Acrossfy jQuery 15 15.10.2010 11:00
Виртуальная Машину вычисляющую НОД. n! слогаемых. Машина по принципам фон Неймана. Chaos1993 Общие вопросы Javascript 2 08.10.2010 11:07
Плывущий фон grefon jQuery 8 04.08.2010 23:02
Фон сайта.Бесконечная анимация цвета mdbm Элементы интерфейса 10 22.03.2010 17:09
Как сделать фон, главной страницы на изображении ? asked86 (X)HTML/CSS 3 03.04.2009 02:54