Форум

monolithed · #11 (**permalink**) 15.01.2011, 20:03

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>

x-yuri · #12 (**permalink**) 15.01.2011, 20:15

monolithed, под windows? Странно, мой подумал, но решил не поднимать, сорри

monolithed · #13 (**permalink**) 15.01.2011, 20:30

Сообщение от x-yuri

под windows?

ага

x-yuri · #14 (**permalink**) 15.01.2011, 20:38

ну вот уменьшенный в два раза (осторожно, браузер может уйти в себя и не вернуться)

<!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>

Aetae · #15 (**permalink**) 15.01.2011, 21:52

Мне ff четырежды предложил остановить скрипт, но цуко не останавливал)

monolithed · #16 (**permalink**) 15.01.2011, 22:12

ага, даже при уменьшенном размере, думаю, что можно без вложенных циклов обойтись, только одним: -?
мой предпоследний пример с художествами и то не грузит так проц..

Aetae · #17 (**permalink**) 15.01.2011, 22:16

Зато изображение отрисованное таким образом хорошо жмётся в пнг.)
Говорю по личному опыту: когда-то в молодости, когда о canvas и слыхом не слыхивал понадобилось отрисовать мне хитрую генерировану картинку. 256*256px(дивов)=)

x-yuri · #18 (**permalink**) 15.01.2011, 22:25

ну извините

Сообщение от monolithed

даже при уменьшенном размере, думаю, что можно без вложенных циклов обойтись,

как? Да и толку, если ты все так же собираешься нарисовать 128x128 дивов

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

p.s. а может в опере запуститься?

monolithed · #19 (**permalink**) 15.01.2011, 23:00

Сообщение от x-yuri

p.s. а может в опере запуститься

я в сафари посмотрел после 5 попытки ))

x-yuri · #20 (**permalink**) 16.01.2011, 05:07

а вот градиент, нарисованный с помощью 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>

Форум

Справочник

Discord чат

Курсы javascript