Генератор цитат (javascript)
Генерируем цитаты на чистом javascript и html5.
Картинка должна быть сохранена в формате png с расширением 600х400px.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Генератор цитат</title>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById('fon'); //Определяю canvas
var ctx = canvas.getContext('2d'); //Определяю контехт canvas
var sprite = new Image();
sprite.src = 'img.png'; //Определяю спрайт
sprite.onload=function(e){ctx.drawImage(sprite, 0, 0);}; //Сразу рисую пустой спрайт
function draw(text, auth)
{
ctx.drawImage(sprite, 0, 0); //Рисую спрайт
var maxWidth = 548; //максимальная длина строки в px
var lineHeight = 25; //максимальная высота строки, нужна для определения положения текста
var marginTop = 200;
/*если мы знаем высоту текста, то мы можем
предположить, что высота строки должна быть именно такой*/
var marginLeft = 590;
ctx.font = "bold 18px courier";
ctx.fillStyle = "#FFF";
ctx.textAlign = "right";
ctx.textBaseline = "middle";
var words = text.split(" ");
var countWords = words.length;
var line = "";
// разделяем текст на строки
var l = text.split ("\n");
var lines = new Array();
var k=0;
// каждую строку делим еще на строчки по длине
for (var c=0;c<l.length;c++) {
var words = l[c].split(" ");
var countWords = words.length;
var line = "";
// перебираем все слова и составляем из них строки
for (var n = 0; n < countWords; n++) {
var testLine = line + words[n] + " ";
var testWidth = ctx.measureText(testLine).width;
if (testWidth > maxWidth) {
lines[k] = line;
k++;
line = words[n] + " ";
}
else {
line = testLine;
}
}
lines[k] = line;
k++;
}
// Проверяем, не вылезли ли мы за границы
if (k>8) {
alert("Слишком много строчек!"); exit;
}
//Считаем, на сколько надо отступить от середины, чтобы весь текст был по центру
marginTop = 205 - (lineHeight) * (k/2);
// Теперь печатаем текст
for (var n=0; n<(k); n++) {
ctx.fillText(lines[n], marginLeft, marginTop);
marginTop += lineHeight;
}
// Печатаем автора
ctx.font = "bold italic 18px courier";
ctx.fillStyle = "#789e92";
ctx.textAlign = "right";
ctx.textBaseline = "middle";
ctx.fillText(auth, marginLeft, 330);
}
document.getElementById('generate').onclick = function() {
var text = 'Наизнанку вещь надеть - битому быть; встреча с женихом (невестой); к слезам; к беде; будешь в чем-то виноватым; неожиданность (приятная или не- приятная - зависит от обстоятельств); к новой любви; примета не сбудется, если попросишь кого-нибудь похлопать по спине.';
var author = 'Автор: Маша';
draw(text, author);
}
}
</script>
<style>
#center {
text-align:center;
}
</style>
</head>
<body>
<div id="center"><canvas id='fon' width='600px' height='400px'></canvas></div>
<div id="center"><input id="generate" type="button" value="Сгенерировать"/></div>
</body>
</html>Картинка должна быть сохранена в формате png с расширением 600х400px.
Похожие новости:
Комментарии:
Нету комментариев для вывода...