Здравствуйте.
Недавно начал разбираться над тем, что представляет из себя тег 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 {
font-family: 'orbitronioregular';
src: url('orbitronio-webfont.eot');
src: url('orbitronio-webfont.eot?#iefix') format('embedded-opentype'),
url('orbitronio-webfont.woff') format('woff'),
url('orbitronio-webfont.ttf') format('truetype'),
url('orbitronio-webfont.svg#orbitronioregular') format('svg');
font-weight: normal;
font-style: normal;
}
body{
margin:0;
padding:0;
background-color:#fff;
}
span{position:absolute;
font:normal 16px/21px orbitronioregular;
color:orange;
margin:0 0 0 -9999px;
}
#canvas{
border-radius:155px;
border:1px solid #CC9933;
background-color:#c0c0c0;
margin:10px 0 0 10px;
box-shadow:2px 2px 15px #CC9933;
} |
Буду очень признателен, если кто поможет разобраться хоть в каких то вопросах, относительно данной ситуации..
