Филактериальный дравингер в Canvas

Как реализовать комиксовые пузыри.

Если Canvas не поддерживается браузером, текст отображается просто без рисунка филактера.

Показ

HTML-код

<div class="bubble">
<canvas id="canvas1" class="bubbleborder" width="240" height="200" >
</canvas>
<div class="bubbletext">
Toutes les généralisations sont fausses, y compris celle-ci. <br><i>Marc Twain.</i>
</div>
</div>

Два слоя расположены абсолютно в другом, оба с верхним = 0 и левым = 0, так что они накладываются друг на друга .

Один - канва и служит для рисования пузыря.
Другой является классическим тегом <div> и используется для отображения текста. Для центрирования текста в пузыре используется свойство padding, применяемое к слою, содержащему его.

Невозможно отформатировать текст прямо в канвы.

Код JavaScript

function drawBubble(ctx, x, y, w, h, radius)
{
  var r = x + w;
  var b = y + h;
  ctx.beginPath();
  ctx.strokeStyle="black";
  ctx.lineWidth="2";
  ctx.moveTo(x+radius, y);
  ctx.lineTo(x+radius/2, y-10);
  ctx.lineTo(x+radius * 2, y);
  ctx.lineTo(r-radius, y);
  ctx.quadraticCurveTo(r, y, r, y+radius);
  ctx.lineTo(r, y+h-radius);
  ctx.quadraticCurveTo(r, b, r-radius, b);
  ctx.lineTo(x+radius, b);
  ctx.quadraticCurveTo(x, b, x, b-radius);
  ctx.lineTo(x, y+radius);
  ctx.quadraticCurveTo(x, y, x+radius, y);
  ctx.stroke();
}
function dispQuote() 
{
  var canvas = document.getElementById('canvas1');
  var ctx = canvas.getContext('2d'); 
  drawBubble(ctx, 10,60,220, 90, 20);
}
window.onload=dispQuote;

Мы не используем текстовые функции Canvas, которые здесь бесполезны.

Код CSS

.bubble
{
  position:relative;
  background:green;
  float:left;     /* because the image at left */
}
.bubbleborder
{
  position:absolute;
  top:0;
  left:0;
}
.bubbletext
{
  position:absolute;
  top:0;
  left:0;
  width:220px;
  height:200px;
  padding:76px 8px 8px 8px;
  text-align:center;
}

Как обобщить сценарий

Все обобщения ложны, но может быть полезно обобщить скрипт для текстов разной длины.

Это можно сделать, подстраивая параметры пузыря в коде JavaScript под длину текста.

1. Функция JavaScript String.length возвращает количество символов.
В
2. зависимости от выбранного шрифта и размера символов будут определяться значения w (ширина) и h (высота) пузыря, которые являются 4-м и 5-м аргументами функции drawBubble.

Вернуться в Канвас.