Текстовая Анимация на 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/ А вы уважаемый, не путайте помощь и посадку на голову . Потратить немного времени не влом , но хотеть чтоб тратилось время на Цитата:
Или ,по вашему , всем информацию на блюдечке приносили? Нет, искали в интернете , в книгах -и это дело буквально часа полутора -чтоб всё найти |
| Часовой пояс GMT +3, время: 09:21. |