Текстовая Анимация на Canvase.
Вложений: 1
Здравствуйте.
Недавно начал разбираться над тем, что представляет из себя тег Canvas и по ходу дела столкнулся с вопросами,связанными с текстовой анимацией(и не только): 1) Есть страница, http://yamaradg.narod2.ru/Canvas/canvas_4.html на которой имеется анимация!(см. на словосочетание 'First Sector') В нём используется подгрузка нестандартных шрифтов через Font-Face из за чего пришлось городить много лишнего. В данной реализации возникают определённые трудности: В браузере Safary появляются глюки(скрин прикрепил) Необходимо подождать пока текст до нижней части холста 'дойдёт' – что бы это увидеть... Идея текстовой анимации такова: Перед каждым выводом текста заново должен прорисовывается фон. В данном случае это обеспечивает бежевый квадрат 200 х 200: ctx.fillRect(48,48,200,200); Вопросы: 1) Когда слова выходят за пределы этого квадрата, начинают оставаться следы от этих слов. как это можно обойти? Не хотелось бы пропуcкать весь холст через setInterval !? Поскольку во первых происходит задержка при подгрузке всего содержимого, а во вторых тени также начинают копироваться вместе с текстом(если их включать): http://yamaradg.narod2.ru/Canvas/canvas_3.html (что естественно не приемлимо.) 2) Cуществует ли какой-нибудь механизм в JS, который бы 'подчищал' всё то лишнее, что рисуется в более глубоких слоях?(в данном примере.) + старые текстовые слои? 3) Возможно ли осуществить тестовую анимацию на холсте как то по другому? 4) Пока не могу разобраться, как прописать ф-цию(в js я не силён) , которая заставляла бы текст прекращать движение в случае если он подходит к краям бежевого слоя(с красной рамкой.) Возможно ли использовать в данном случае св-во 'isPointInPath'? Не могу понять как оно функционирует. :) (облазил весь инет - не нашёл ни одного нормального, детального разбора(с примерами) этого св-ва!) Код с вышеописанным примером выглядит следующим образом:
var canvas, ctx, w, h;
canvas = document.getElementById('canvas');
w = canvas.width;
h = canvas.height;
ctx = canvas.getContext('2d');
ctx.save();
ctx.beginPath();
ctx.shadowColor = "red";
ctx.shadowOffsetX=1;
ctx.shadowOffsetY=1;
ctx.shadowBlur =2;
ctx.strokeStyle="red";
ctx.strokeRect(48,48,200,200);
ctx.closePath();
x=10;y=10;
function myTimeout(){
ctx.beginPath();
ctx.shadowColor = "transparent";
ctx.fillStyle="#CC9933";
ctx.fillRect(48,48,200,200);
ctx.closePath();
ctx.beginPath();
ctx.shadowColor = "transparent";
ctx.fillStyle="blue";
ctx.fillRect(48,48,100,100);
ctx.closePath();
ctx.beginPath();
ctx.shadowColor = "transparent";
ctx.fillStyle = "green";
ctx.arc(148, 148, 25, Math.PI*3/2, Math.PI, false);
ctx.fill();
ctx.closePath();
ctx.beginPath();
if (ctx.isPointInPath(50,50)==true) {
alert('Ура !');
};
ctx.fillStyle="red";
ctx.font="400 15px orbitronioregular";
ctx.shadowBlur = 40;
ctx.shadowOffsetX=7;
ctx.shadowOffsetY=7;
ctx.shadowColor = "#cc9933";
ctx.fillText("First",x+64,y+82);
ctx.fillText("Sector",x+56,y+102);
ctx.restore();
x+=5;y+=5;
ctx.closePath();
};
intervalID=setInterval(myTimeout,1000);
<!DOCTYPE html> <html> <head> <link href="style_2.css" type="text/css" rel="stylesheet"> </head> <body> <canvas id="canvas" width="298" height="298"> Not Support Canvas </canvas> <span>Text For Canvas</span> <script src="script_4.js" type="text/javascript"></script> </body> </html> Код:
@font-face { |
Лень смотреть код и читать написанное.
Проблема в том что , когда текст выходит за пределы "стираемой области" след от него остаётся - он не стирается? Даже при сохранении состояния канвы? Если да -сохранение и возврат состояния канвы не очищает нарисованное, а возвращает состояние к сохранённому: угол поворота, центр... |
Цитата:
Насчёт угла поворота центра и т.д. - я не совсем вас понял? |
Цитата:
пока сами не сотрёте то, что нарисовано -оно не затрёться под сотрётся: затирание другим контентом, очистка области , заливка необходимым цветом .. Цитата:
Всё что нарисовано на канве , не удалится при восстановлении до состояния "пока не рисовалось" |
Цитата:
Что конкретно нужно прописать(руками) что бы все старые ненужные слои подчищались? |
Цитата:
а в обще может поможет "слоёная канва" -несколько канв , опр. размера, лежащих друг на друге а в обще всё ответы на подобные вопросы ,есть в мало мальски приличном тутореале по канве, каких в сети тысячи, как и есть в свободной скачке несколько книг по канве |
Цитата:
Цитата:
Цитата:
(что бы описывалось, как именно решать данный вопрос с текстовой анимацией. Лично я найти этого не смог.) |
Цитата:
В канве всегда 1 слой!! А различные изображения, фигуры наслаиваются на канву(на существующее изображение канвы и образуя "новое изображение" канвы) в порядке их рисования и по заданным правилам . Цитата:
Цитата:
|
Спасибо за 'помощь'!
Я перед созданием поста - сутки в гугле инфу пробивал по данной тематике. Если бы, что то обнаружил(ответы на свои вопросы) то точно бы сюда не обращался.. P.S. Под слоями(внутри холста) я подразумевал контуры.. Беру пример описания метода 'isPointInPath': http://www.xiper.net/manuals/canvas/...intInPath.html Как конкретно он работает я так и не понял!? (Пробую в разные места кода(вместе с этим методом) Аlert подставлять и ноль реакции!) В других источниках тоже самое примерно! (в том числе и в поиске по этому форуму!) Где мне ещё гуглить? |
Цитата:
http://www.google.com.ar/search?sour...%83+javascript первый же http://vremenno.net/js/introducing-canvas/ А вы уважаемый, не путайте помощь и посадку на голову . Потратить немного времени не влом , но хотеть чтоб тратилось время на Цитата:
Или ,по вашему , всем информацию на блюдечке приносили? Нет, искали в интернете , в книгах -и это дело буквально часа полутора -чтоб всё найти |
То, что вы в качестве примера привели - это ещё одно подтверждение моих слов.
Там вообще ничего не сказано о нужной мне тематике. Просто элиментарные примеры основ расписаны и не более! Подробного описания метода 'isPointInPath' не наблюдается. Как сохранять состояние текста(и вернуть или очистить при необходимости.) - об этом я тоже ничего не увидел. (имею ввиду хоть какие то обходные варианты..) Как анимировать, что бы текст от стенок внутри контура отталкивался - про это я вообще молчу! (и как избежать тех глюков в Safary, о которых речь шла ранее - тоже естественно..) |
Цитата:
Цитата:
Цитата:
Цитата:
чудо . тоже самое . что ещё должно быть написано? Проверяет нарисована ли точка по указанной координате и возвращает тру или фалс Цитата:
Хотя тяжело представить почему, по вашему, в информации по основам канвы , должны преподноситься основы анимации? это не глюки . сафари всё согласно стандартно отрисовывает. задумайтесь лучше почему у вас глюки в других браузерах и не соответствует поведению сафари |
Я уже говорил о том, что не имею возможности гуглить на инглише!
(а вы мне ссылку на нём скинули. Я ничего по ней не понял.) Далее: Мне не нужно очищать область! Мне необходимо понять как очистить старые текстовые контуры в моей анимации? Как составить вообще сам этот JS код имеется ввиду!? (То есть у меня нет идей как это сделать. Уже писал о том не силён в этом деле! Есть какие то знания в теории + JQ немного понимаю но не дальше!) |
Цитата:
Всё что когда либо было нарисовано на канве -нельзя отменить -чего здесь не ясного то? Цитата:
Возьми лист бумаги , напиши на нём текст карандашом . и сделай чтоб он не был видим . -или воспользуйся резинкой, или зарисуй весь любым цветом( прозрачный цвет это тоже цвет) -других вариантов нет неужели тяжело забить в поиск и посмотреть что можно сохранить и восстановить в канве? http://www.xiper.net/manuals/canvas/2D-api/restore.html кроме s Цитата:
запрос http://www.google.com.ar/search?sour...w=1920&bih=944 и на первой же странице на русском . так что не надо ляля что за день не нашел ничего |
Извините. Но советовал бы вам задуматься над тем, как вы ведёте себя с людьми и позиционируете вообще в целом!
Если бы так отвечали на всех форумах. (Цит. 'Бля') то я не знаю во что бы инет превратился..(хотя возможно все к этому и идёт!) Как по мне - лучше просто не отвечать, если желания нет или способностей объяснять! (по крайней мере с экономили бы своё время да и моё тоже!) А так - я просто потратил на переписку с вами минут 30-ть и ничего нового от вас абсолютно не узнал! P.S. Желаю успехов.. |
Цитата:
Цитата:
|
Цитата:
Проблему хотелось обнаружить после того, когда увидел бы правильную реализацию(в виде кода). Что обычно(в таких ситуациях) и происходит практически на любом форуме. На это могло бы уйти гораздо меньше времени, чем вы затратили на холиварство.. Вместо этого просто наблюдаю(всё это время) человека позиционирующего себя с высокой колокольни! (который мне ещё и минус в карму поставил за правильную критику!) |
Цитата:
код: кто этот каркас дал -я помню каркас этот применим не для всего. даже не зная основ пройтись по докам и примерам (коих в интернете более чем) , разобрать и найти ошибку -дело нескольких десятков минут поднять флаг "я всё знаю , что ты мне даёшь информацию для начинающих" и не потрудится поискать ошибку у себя ,а не у "окружающих" и перекладывать на " холивар" -не знаю как это назвать... |
Цитата:
Если не хотите показать как это правильно делается(на примере) - больше не пишите. Потому, как мы действительно с вами ни о чём говорим сейчас! (Ну сами подумайте..) Я уже сказал, что по докам(вернее по тем огрызкам на русском), что есть в инете - уже прогуглил прилично! (+ кучу видеороликов просмотрел за последние дни..) Мне эта инфа абсолютно ничего не дала в плане решения именно этих проблем. Далее решил обратится на форум! Если бы получил правильный код - то занялся бы его детальным анализом! Другого пути решения этой задачи не нашёл! Всё аргументы которые вы привели ранее мне действительно ничего не дали! (В том смысле что я ни на шаг не продвинулся в решении вопросов..) Вот и всё.. |
Цитата:
какие примеры -ясно сказано, что всё что появляется на канве откатом не стирается , чтоб удалить нужно стирать участок канвы -куда уж боле? ссылки есть что при откате восстанавливается , перейти по ним можно посмотреть что это . что ещё нужно ? какие примеры то вы хотели пример как стирать канву , типа по ссылкам его нет, то у метода нет "развёрнутого" описания , то вся информация для новичков , а вы профи.... |
Смотрите.
Стирать как это я знал. Но у меня же контуры находятся в методе setInterval! Я пробовал много чего в своём коде - но у меня не получалось сделать так что бы происходила и анимация и при этом старые контуры исчезали(или если хотите закрашивались с нужным мне цветом(прозрачным допустим.)..) То что нельзя вообще стерать(даже скриптом или химией любой) контуры об этом не знал.(Теперь понял.) Далее мне не ясно как метод isPointinPath работает? Что бы я это смог понять мне надо увидеть на моем(или хоть каком то примере его в действии..) Пример:
ctx.beginPath();
ctx.fillStyle="red";
ctx.font="400 15px orbitronioregular";
ctx.shadowBlur = 40;
ctx.shadowOffsetX=7;
ctx.shadowOffsetY=7;
ctx.shadowColor = "#cc9933";
ctx.fillText("First",x+64,y+82);
ctx.fillText("Sector",x+56,y+102);
ctx.restore();
x+=5;y+=5;
if (ctx.isPointInPath(1,1)) {
alert('Ура !');
};
Вот так примерно я пытался на своём коде понять как это работает. Пробовал по разному с любыми значениями. Ничего не получилось. В инете просто нет примера(детального) на русском.(не исключаю что я мог не найти - но прогуглил я прилично. По нескольку страниц из каждого поискового запроса!) Далее я хотел понять, как правильно реализовать(то есть писать код) анимацию текста, что бы он от стенок ударялся и дальше отлетал по другой(нужной мне) траектории? (где в инете есть подобная инфа на русском?) Поэтому я и обратился на форум. (сам придумать пока решение не могу. Тем более что не удается понять как метод isPointInPath функционирует.) + у меня репитятся тени(у контуров в методе setInterval) если их включать! http://yamaradg.narod2.ru/Canvas/canvas_3.html Это тоже с помощью гугла как решить можно? (Особенно если опыта в этой сфере(JS) не так много..) |
Цитата:
Цитата:
Цитата:
Там же: http://www.xiper.net/manuals/canvas/2D-api/font.html ... если посмотреть на примеры относительно текста , в глаза явно бросается отсутствие Цитата:
http://www.xiper.net/manuals/canvas/...beginPath.html явно можно прочитать для чего он используется . За чем же его совать для того , для чего он не предназначен? а если забить в поиске канва яваскрипт основы , то можно перейти с первой страницы на подобные сайты http://w3pro.ru/article/html-5-canva...chinayushchikh Цитата:
|
Всё ссылки которые вы мне скидывали в этом топике - я уже читал ранее!
(кроме буржуйского примера.) Вот эту ссылку http://www.xiper.net/manuals/canvas/...intInPath.html я просматривал ранее. (не один раз.) По аналогии с ней и пытался проверить этот метод в своём коде! Если вы мне приведёте пример таким образом что бы Alert действительно сработал(допустим на моём коде.) - то думаю что понять мне будет это дело совсем не сложно. Ну а так, что мне дает значение истина или ложь? (ничего.) Как начало нового контура(beginPath) мешает мне или помагает в данном случае(из ваших слов) я вообще не понял, если честно.. |
Цитата:
Цитата:
Цитата:
Цитата:
Цитата:
http://www.xiper.net/manuals/canvas/...trokeRect.html http://www.xiper.net/manuals/canvas/.../fillRect.html ... Учите основы!! Примеров , и доков качественных на русском море |
Цитата:
Но почему у меня всё таки Alert не срабатывает? (хоть это вы можете объяснить? Если уж на всё другие вопросы отвечать конкретно вы на отрез отказываетесь. Или опять ссылки на доки давать будете?) P.S. А с манерами поведения(и возможно с психикой! Говорю, как психолог по образованию.) у вас действительно по всей видимости проблемы имеются! Иначе подобные действия объяснить довольно непросто.. Говорю это не для того, что бы вас оскорбить(ни в коем случае.) - а для того, что бы вы задумались(хотя бы на мгновение) и сделали выводы! (в противном случае эти выводы буду делать близкие вам люди за вашей же спиной..) Впрочем - это уже не моё дело.. Моё дело предупредить. (Хотя можете ещё один минус в карму мне поставить.. Возможно так вам будет гораздо легче!) |
Цитата:
|
| Часовой пояс GMT +3, время: 17:14. |