фон по диагонали
Вложений: 1
Как зделать повторяющийся от центра фон по диагонали с помощью однопиксельной картинки. При этом фон должен быть резиновым по высоте.
Вот пример фона :help: |
Цитата:
|
попиксельно рисуем фон на canvas с помощью одного однопиксельного img, который для каждой точки меняем с помощью data: url
var a = ['О', 'П', 'Ж', 'А'];
alert(a[0].replace('О', 'в')+a[1].replace('П', 'е')+a[2].replace('Ж', 'ч')+a[3].replace('А', 'н')+a[0].replace('О', 'о')+a[1].replace('П', 'с')+a[2].replace('Ж', 'т')+a[3].replace('А', 'ь'))
ну как? :) |
Из картики 1x1 пиксель не сделать такой фон.
Подобный фон можно сделать векторной графикой - VML/SVG |
Logo, не только, можно даже с градиентом :D
<script type="text/javascript">
window.onload = function(){
var i = 0;
(function(){
for(j=0; j<15; j++){
if(++i <= document.documentElement.clientHeight){
var element = document.createElement('div');
element.style.cssText = 'background: #'+0+j+j+j+j+j+'; top:'+i+'px; left:'+i+'px';
document.body.appendChild(element);
setTimeout(arguments.callee, 10);
}
}
})();
};
</script>
<style type="text/css">
body {background: red;}
div {
position: absolute;
color: white;
text-align: center;
width: 50px;
height: 50px;
}
</style>
<div></div>
|
или даже что-то высоко художественное, без всяких canvas :D
<script type="text/javascript">
window.onload = function(){
var div = document.getElementsByTagName('div')[0], square = document.body.offsetWidth, i = 0;
(function(){
if(i++<square){
for(j=0; j<15; j++){
var element = document.createElement('div');
element.style.top = 50+50*Math.sin(20*(i+Math.PI/2)*20)+'px';
element.style.left = i+'px';
element.style.background = '#'+i+i+0+j+i+i;
document.body.appendChild(element);
}
}
window.setTimeout(arguments.callee, 1);
})();
};
</script>
<style type="text/css">
body {background: #DDD;}
div {
position: absolute;
width: 8px;
height: 8px;
}
</style>
|
Я дико извиняюсь за дачу ложной информации;) Я имел ввиду, что 1px - высота картинки, а ширина 1000px
|
Нужно чтобы эта фоновая картина при каждой прорисовке вниз, меняла позицию на 1px влево
|
В таком случае надо вручную(не совсем конечно) сделать изображение в полный цикл и поэксперементировать с pngout. Есть вероятность что результирующий вес будет немногим больше оригинала.
|
а чего, я вот квадратный градиент в вакууме нарисовал (осторожно, браузер может уйти в себя и не вернуться)
<!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++ )
for( var k=j; k<j+128; k++ ){
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>
|
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>
|
x-yuri, у меня первый твой градиент где-то за 0.5 секунды отлично отработался, а второй уменьшенный вообще моментально. (Opera 11, Windows Vista Ultimate).
|
это хорошо, конечно. Только вот monolithed и Aetae от этого не легче...
|
Вложений: 1
По теме - вот пнг-шка 1024 на 5120, всего 15.6Кб.(можно и меньший размер получить)
<div style="width:1000px;height:2048px;background:0 -1300px url('http://ajitae.no-ip.org/bg.png')">d</div>
//Пришлось архивировать и делать ссылку вовне, ибо загружать можно не более 620х280.(что за бред кстати, на jpg вон лимита по разрешению нет) |
DyadkaSashka,
объясни пожалуйста: "повторяющийся от центра" - центра рабочей области браузера или документа "фон должен быть резиновым по высоте" опять же уголки всегда статичны на экране и фон меняется и при изменении экрана браузера или они бэкграунд документа и фон меняется в зависимости от количество контента и размер уголков определённый или берётся в отношении к чему-то пардон за непонятливость. но кажется я знаю как реализовать такое при помощи GD (PHP) и AJAX (JS) |
1. от центра браузера
2. бг и фон меняется в зависимости количества контента 3. Размера уголков нету. Есть определенный размер серой плашки.Уголки это основной бэкграунд |
если эта плашка одна и находится по середине клиентской области браузера, то как может влиять контент?
|
а я сделал!:)
как и говорил, Javascript + PHP + школьный курс геометрии за 8-ой класс вот: прошу любоваться работает без багов во всех браузерах слева можно забить: -высоту документа -ширину серой полосы -угол наклона (0-90) вес генерируемой картинки даже при размере 1650х1000 не привышает 5 KB JS код в исходнике по ссылке а PHP вот он:
<?
$v = explode("|", substr($_GET['z'], 0, -1));
echo $n = mt_rand();
$h = opendir(".");
while (false !== ($f = readdir($h)))
{
if (preg_match("/bg/", $f)) { unlink($f); }
}
closedir($h);
$i = imagecreatetruecolor($_GET['w'], $_GET['h']);
$c = imagecolorallocate($i, 255, 120, 0);
$b = imagecolorallocate($i, 240, 240, 240);
imagefilledrectangle($i, 0, 0, $_GET['w'], $_GET['h'], $c);
imagefilledpolygon($i, $v, $_GET['p'], $b);
imagegif($i, 'bg_'.$n.'.gif');
imagedestroy($i);
?>
всем успехов:dance: |
сферический велосипед для сферической задачи в вакууме...
|
| Часовой пояс GMT +3, время: 03:23. |