Dessiner des phylactères dans Canvas

Comment réaliser des bulles de bande dessinées.

Si Canvas n'est pas supporté par le navigateur, le texte s'affiche simplement sans le dessin du phylactère.

Démonstration

Code 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>

Deux calques sont positionnés de façon absolue dans un autre, tous les deux avec top=0 et left=0, de façon à ce qu'ils se superposent.

L'un est un canvas et sert à dessigner la bulle.
L'autres est une balise <div> classique et sert à afficher le texte. Pour centrer le texte dans la bulle, on se sert de la propriété padding appliquées au calque qui le contient.

Il n'est pas possible de formater un texte directement dans canvas.

Code 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;

On n'utilise pas les fonctions de texte de Canvas, qui sont inutiles ici.

Code 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;
}

Comment généraliser le script

Toutes les généralisations sont fausses, mais il peut être cependant utile de généraliser le script pour des textes de longueur différentes.

Cela pourra se faire en adaptant les paramètres de la bulle dans le code JavaScript à la longueur du texte.

1. La fonction JavaScript String.length retourne le nombre de caractères.
2. En fonction de la police et la taille de caractères choisis, on déterminera les valeurs w (largeur) et h (hauteur) de la bulle qui sont les 4ème et 5ème arguments de la fonction drawBubble.

Retourner à Canvas.