canvas要素を使って、画像の上にテキストを描画。【HTML・JS(jQuery)】

ウェブ開発を行う際に、「画像の上にテキストを描画したい」というケースがあったため、やり方のメモを残しました。

HTMLのcanvasオブジェクトとJS(jQuery)を使えば、実装できます。

デモ・解説

デモ

See the Pen canvas by masahiro nomura (@masahiroview) on CodePen.

テキストを描画した吹き出しは、普通に右クリックでダウンロード可能です。

JavaScript(jQuery)コード

const canvas = document.getElementById("preview");
const ctx = canvas.getContext('2d');

//初期吹き出しダウンロード
$(function() {
  loadFukidashiImage();
});

//①キャンバス要素に画像を描画
function loadFukidashiImage() {
  //画像を読み込む
  var image = new Image();
  image.src = 'https://tool-engineer.work/wp-content/uploads/2022/11/hukidashi-e1668301413980.png';
  //image()読み込み完了次第、canvasの高さ・幅・表示位置を指定する
  $(image).on("load",function(){
    canvas.width = image.width;
    canvas.height = image.height;
    ctx.drawImage(image, 0, 0);
  });
}


//②キャンバスに文字を描画
function drawFukidashiText() {
    const text = $("#text");
    ctx.font = '10px serif';
    ctx.fillStyle = '#000';
    ctx.textBaseline = 'center';
    ctx.textAlign = 'center';
    ctx.fillText(text.val(), 50, 50);
}

描画の流れ

①canvas要素に画像を描画:loadFukidashiImage()

image()コンストラクターに画像を指定して、読み込み完了次第、画像サイズに合わせてcanvasのサイズを指定しています。

②キャンバスに文字を描画

キャンバスにテキストを描画します。

今回のデモでは、フォント(serif)・フォント色(#000)・フォントサイズ(10px)・テキストベースライン(center)・テキスト揃え(center)・テキスト表示位置(50,50)を指定しています。

補足:canvasオブジェクトのパラメータについて

今回紹介したパラメータ以外にも、様々な設定が可能です。

詳細は、下記外部サイト様をご参照ください。

【JavaScript】 Canvasの使い方まとめ
JavaScriptのCanvasAPIを利用すると、canvas要素に描画をおこなうことができます。CanvasAPI...

参考

・とっちらか~る:JavaScriptでcanvasに文字を描画する方法

・けーちゃんのプログラム開発ノート:【JavaScript】 Canvasの使い方まとめ

コメント

タイトルとURLをコピーしました