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, под windows? Странно, мой подумал, но решил не поднимать, сорри
|
Цитата:
|
ну вот уменьшенный в два раза (осторожно, браузер может уйти в себя и не вернуться)
<!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>
|
Мне ff четырежды предложил остановить скрипт, но цуко не останавливал)
|
ага, даже при уменьшенном размере, думаю, что можно без вложенных циклов обойтись, только одним: -?
мой предпоследний пример с художествами и то не грузит так проц.. |
Зато изображение отрисованное таким образом хорошо жмётся в пнг.)
Говорю по личному опыту: когда-то в молодости, когда о canvas и слыхом не слыхивал понадобилось отрисовать мне хитрую генерировану картинку. 256*256px(дивов)=) |
Вложений: 1
ну извините
Цитата:
прикрепил, результат во вложении p.s. а может в опере запуститься? |
Цитата:
|
Вложений: 2
а вот градиент, нарисованный с помощью 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>
Цитата:
Цитата:
и, наконец... сферический градиент в вакууме :) промежуточный вариант: <!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>
|
| Часовой пояс GMT +3, время: 11:53. |