work page

Canvasテキストを折り返す

YOUR CODE:

ctx.font = '40px "Noto Sans JP"';
ctx.fillText(text, 0, 50, 400);
IDEAL
ACTUAL

「正しく改行する」には追加の処理が必要

自動で折り返す機能はないので、Intl.Segmenterで単語に分け、単語ごとにmeasureText()で幅を計測しながら描画します。 欧文のハイフネーションや和文の禁則処理も必要な場合、さらに追加の実装が必要です。 

for (const { segment } of segments) {
  const nextLine = line + segment;
  if (ctx.measureText(nextLine).width > 400) {
    ctx.fillText(line.trimEnd(), 0, y);
    line = segment.trimStart();
    y += lineHeight;
  } else {
    line = nextLine;
  }
}

Canvasで正しく動くUIを作る

ポインターの出入りと押下状態、キーボード操作、フォーカス表示をCanvas 2D APIだけで実装します。

Click Me!

マウス、タッチ、Tabキー、Enterキー、Spaceキーで操作できます。

IMPLEMENTATION

コード例

描画だけでなく、ヒットテスト、押下中の領域判定、ポインターキャプチャ、キーボード操作、フォーカス表示、アクセシビリティ上の通知まで個別に実装する必要があります。

コードを読み込んでいます…