canvas テキストの描画と画像の挿入 様々な描画方法と変換方法

今回は、テキストの描画から画像の挿入、その他様々な描画方法、変換方法について見ていきましょう。

テキストの描画

テキストを描画するには、以下の方法があります。

それぞれ引数には、「(text, x, y, [maxWidth])」を指定します。

「maxWidth」は省略可能です。

描画するには、以下の設定を使用します。

• font：太さ、大きさ、ファミリーを指定します。
• textAlign：テキストの配置位置を指定します。left, right, center, start, end を指定できます。
• textBaseline：テキストのベースラインを指定します。
• direction：テキストの方向を指定します。左書き、右書きなど。

fillText

const canvas23 = document.getElementById('sample23');
const cont23 = canvas23.getContext('2d');

cont23.font = 'bold 50px Align ';
cont23.fillText('Hello World !!', 10, 50);

strokeText()

const canvas24 = document.getElementById('sample24');
const cont24 = canvas24.getContext('2d');

cont24.font = 'bold 50px Align ';
cont24.strokeText('Hello World !!', 10, 50);

画像

最初から画像を作成するには、HTMLImageElementのオブジェクトを作成します。

その際は、Image()コンストラクタを使用します。

const canvas25 = document.getElementById('sample25');
const cont25 = canvas25.getContext('2d');

let img = new Image();
img.src = 'https://hitoridemanabou.net/wp-content/uploads/2022/06/clickicon-1.png';

img.onload = () => {
  cont25.drawImage(img, 10, 10);
};

画像を描画するには、「drawImage()」メソッドを使用します。

widthとheightを使用することにより、画像を拡大縮小することが出来ます。

また、「drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)」と記述することにより、画像を切り抜くことも出来ます。

詳しくはMDNのサイトをご参照ください。

MDN:CanvasRenderingContext2D.drawImage（）

保存と復元

const canvas26 = document.getElementById('sample26').getContext('2d');

canvas26.save();
canvas26.fillStyle = 'green';
canvas26.fillRect(10, 10, 110, 110);

canvas26.restore();
canvas26.fillRect(120, 120, 120, 120);

save()とrestoreを使用しない場合は、以下になります。

const canvas27 = document.getElementById('sample27').getContext('2d');

canvas27.fillStyle = 'green';
canvas27.fillRect(10, 10, 110, 110);

canvas27.fillRect(120, 120, 120, 120);

移動

並行方向に移動します。

const canvas28 = document.getElementById('sample28').getContext('2d');

for (let i = 0; i < 5; i++) {
  for (let r = 0; r < 5; r++) {
    canvas28.save();
    canvas28.fillStyle =
      'rgb(' + (200 - 40 * i) + ',' + (255 - 50 * i) + ',255'; //色の変化
    canvas28.translate(10 + r * 40, 10 + i * 40); //移動距離
    canvas28.fillRect(0, 0, 30, 30); // 矩形のサイズ
    canvas28.restore();
  }
}

回転

回転させるには、「rotate()」メソッドを使用します。

const canvas29 = document.getElementById('sample29').getContext('2d');

canvas29.fillStyle = 'green';
canvas29.fillRect(50, 50, 150, 30);

canvas29.translate(125, 65);
canvas29.rotate(Math.PI / 2);
canvas29.translate(-125, -65);

canvas29.fillStyle = 'red';
canvas29.fillRect(50, 50, 150, 30);

const canvas30 = document.getElementById('sample30').getContext('2d');

canvas30.save();

canvas30.fillStyle = 'green';
canvas30.fillRect(30, 30, 100, 100);

canvas30.rotate((Math.PI / 180) * 25);
canvas30.fillStyle = 'red';
canvas30.fillRect(30, 30, 100, 100);

拡大縮小

const canvas31 = document.getElementById('sample31').getContext('2d');

canvas31.scale(10, 3);
canvas31.fillStyle = 'red';
canvas31.fillRect(10, 10, 8, 20);

canvas31.scale(-1, 1);
canvas31.font = '5px serif';
canvas31.fillText('Hello World', -35, 50);

座標変換

座標を変換することで、拡大縮小、回転、移動などさせることが出来ます。

• a：水平スケーリング
• b：垂直
• c：水平
• d：垂直スケーリング
• e：水平移動
• f：垂直移動

const canvas32 = document.getElementById('sample32').getContext('2d');

canvas32.transform(1, 0.3, 0.8, 1, 0, 0);
canvas32.fillStyle = 'green';
canvas32.fillRect(10, 10, 100, 100);

あとがき

沢山のパターンを見てきましたが、一度で覚えるのは難しいので、まずは基本的な操作方法のみ確認しておきましょう。