Итак, я освоил тег canvas. Понятно, что в него можно играть бесконечно.
Но пока что я написал небольшой и простой объект — sexyReflection.
Помните такие красивые отражения в айПадах? чтобы такие сделать на своей странице, необходимо либо сломать зубы и отступиться на ниве css, либо, признав, что пользователи IE6-8 не увидят всей красоты, и приняться за canvas. Я пошёл по второму пути.
Встречайте:
http://akmentornis.com/canvas.html
Что сделано?
Полностью настраиваемое отражение!
1. Можно указать глубину отражения, можно сделать его сглаженным по краям, чёрно-белым, высветлить/затемнить.
2. Если вы захотите двигать изображение вправо/влево, вверх, вниз, то всё оптимизировано; есть возможность сохранять отражение и не пересчитывать его, если ничего не поменялось!
3. Можно просто передать имя файла, координаты на канве, и всё будет нарисовано! (да, функция подождёт загрузки файла!)
4. Эффекты! Базовый, с мягкими краями, чёрнобелый, затемнялка/высветлялка.
Как пользоваться?
Создать канву!
<canvas id="fmC"></canvas>
Потом, вам нужно просто взять котекст канвы:
var context = $('#fmC')[0].getContext("2d");
Дальше, создать объект sexyReflex
rf = new sexyReflex ()
...и передать контекст этому объекту. Вот так:
rf.putImageWithReflex ( '/IMG00148.jpg', context, 10, 0, 600, 50, 2, 'darken 0.995' );
Параметры:
1. Первый — либо адрес картинки, либо сама картинка (объект определит)
2. Контекст канвы.
3 и 4: где рисовать?
далее параметр опционален: новая ширина картинки (если вы хотите сделать ресайз)
глубина отражения,
отступ от картинки,
эффекты.
Что нужно сделать?
1. Правильный fall-back в эксплорерах. Пока что эксплорер ругаеццо. Но Опера/Хром/Файрфокс рады и показывают всё, что надо.
2. Функцию, которая сама съест <img> и превратит его в канвас с картинкой (если сможет)
3. Эффекты!
4. Оптимизации!
Но пока что я написал небольшой и простой объект — sexyReflection.
Помните такие красивые отражения в айПадах? чтобы такие сделать на своей странице, необходимо либо сломать зубы и отступиться на ниве css, либо, признав, что пользователи IE6-8 не увидят всей красоты, и приняться за canvas. Я пошёл по второму пути.
Встречайте:
http://akmentornis.com/canvas.html
Что сделано?
Полностью настраиваемое отражение!
1. Можно указать глубину отражения, можно сделать его сглаженным по краям, чёрно-белым, высветлить/затемнить.
2. Если вы захотите двигать изображение вправо/влево, вверх, вниз, то всё оптимизировано; есть возможность сохранять отражение и не пересчитывать его, если ничего не поменялось!
3. Можно просто передать имя файла, координаты на канве, и всё будет нарисовано! (да, функция подождёт загрузки файла!)
4. Эффекты! Базовый, с мягкими краями, чёрнобелый, затемнялка/высветлялка.
Как пользоваться?
Создать канву!
<canvas id="fmC"></canvas>
Потом, вам нужно просто взять котекст канвы:
var context = $('#fmC')[0].getContext("2d");
Дальше, создать объект sexyReflex
rf = new sexyReflex ()
...и передать контекст этому объекту. Вот так:
rf.putImageWithReflex ( '/IMG00148.jpg', context, 10, 0, 600, 50, 2, 'darken 0.995' );
Параметры:
1. Первый — либо адрес картинки, либо сама картинка (объект определит)
2. Контекст канвы.
3 и 4: где рисовать?
далее параметр опционален: новая ширина картинки (если вы хотите сделать ресайз)
глубина отражения,
отступ от картинки,
эффекты.
Что нужно сделать?
1. Правильный fall-back в эксплорерах. Пока что эксплорер ругаеццо. Но Опера/Хром/Файрфокс рады и показывают всё, что надо.
2. Функцию, которая сама съест <img> и превратит его в канвас с картинкой (если сможет)
3. Эффекты!
4. Оптимизации!
So, I mastered the canvas tag. It is clear that it can be played endlessly.
But so far I have written a small and simple object - sexyReflection.
Remember such beautiful reflections in iPads? to do such on your page, you must either break your teeth and fall back on the css field, or, admitting that IE6-8 users will not see all the beauty, and set to canvas. I went the second way.
Meet:
http://akmentornis.com/canvas.html
What is done?
Fully customizable reflection!
1. You can specify the depth of reflection, you can make it smooth at the edges, black and white, brighten / darken.
2. If you want to move the image left / right, up, down, then everything is optimized; it is possible to save the reflection and not recount it if nothing has changed!
3. You can simply transfer the file name, coordinates on the canvas, and everything will be drawn! (yes, the function will wait for the file to load!)
4. Effects! Basic, with soft edges, black and white, dimming / bleaching.
How to use?
Create a canvas!
<canvas id = "fmC"> </canvas>
Then, you just need to take the canvas text:
var context = $ ('# fmC') [0] .getContext ("2d");
Next, create a sexyReflex object
rf = new sexyReflex ()
... and pass the context to this object. Like this:
rf.putImageWithReflex ('/IMG00148.jpg', context, 10, 0, 600, 50, 2, 'darken 0.995');
Parameters:
1. The first is either the address of the picture or the picture itself (the object will determine)
2. The context of the canvas.
3 and 4: where to draw?
further the parameter is optional: the new image width (if you want to resize)
depth of reflection
indent from the picture,
effects.
What should be done?
1. The correct fall-back in explorer. So far, explorer rugaetstso. But Opera / Chrome / Firefox are happy and show all that is needed.
2. A function that will eat <img> and turn it into a canvas with a picture (if it can)
3. Effects!
4. Optimization!
But so far I have written a small and simple object - sexyReflection.
Remember such beautiful reflections in iPads? to do such on your page, you must either break your teeth and fall back on the css field, or, admitting that IE6-8 users will not see all the beauty, and set to canvas. I went the second way.
Meet:
http://akmentornis.com/canvas.html
What is done?
Fully customizable reflection!
1. You can specify the depth of reflection, you can make it smooth at the edges, black and white, brighten / darken.
2. If you want to move the image left / right, up, down, then everything is optimized; it is possible to save the reflection and not recount it if nothing has changed!
3. You can simply transfer the file name, coordinates on the canvas, and everything will be drawn! (yes, the function will wait for the file to load!)
4. Effects! Basic, with soft edges, black and white, dimming / bleaching.
How to use?
Create a canvas!
<canvas id = "fmC"> </canvas>
Then, you just need to take the canvas text:
var context = $ ('# fmC') [0] .getContext ("2d");
Next, create a sexyReflex object
rf = new sexyReflex ()
... and pass the context to this object. Like this:
rf.putImageWithReflex ('/IMG00148.jpg', context, 10, 0, 600, 50, 2, 'darken 0.995');
Parameters:
1. The first is either the address of the picture or the picture itself (the object will determine)
2. The context of the canvas.
3 and 4: where to draw?
further the parameter is optional: the new image width (if you want to resize)
depth of reflection
indent from the picture,
effects.
What should be done?
1. The correct fall-back in explorer. So far, explorer rugaetstso. But Opera / Chrome / Firefox are happy and show all that is needed.
2. A function that will eat <img> and turn it into a canvas with a picture (if it can)
3. Effects!
4. Optimization!
У записи 1 лайков,
0 репостов.
0 репостов.
Эту запись оставил(а) на своей стене Марк Гондельман
