テキストが縦書きされたキャンバスを生成するライブラリ
vertical_text_canvas.jsを使ってください。
<script src="https://cdn.jsdelivr.net/npm/@mogamoga1024/vertical-text-canvas@latest/vertical_text_canvas.min.js"></script>npm i @mogamoga1024/vertical-text-canvas
import { createVerticalTextCanvas } from '@mogamoga1024/vertical-text-canvas';使いたい関数をimportしてください。
引数のテキストが縦書きされたキャンバスを返します。
ただし半角文字は横書きされます。
縦書きにしたい場合はcreateAllVerticalTextCanvas関数を使ってください。
| 名称 | 型 | 説明 |
|---|---|---|
| text | string | 縦書きにしたい文字列 |
| font | string | 太さ、大きさ、フォントファミリーの文字列 例： '400 40px sans-serif'
|
| options | object (省略可) | canvasのcontextに適応させたい設定など また、lineWidthプロパティを定義すると輪郭が追加されます。 例： { fillStyle: '#ff0000' }
|
| maxHeight | number (省略可) | テキストを描画する際の最大高さ。 CanvasRenderingContext2D:fillTextメソッドの第4引数で使う。 |
Canvas
戻り値のCanvasのwidth, heightは引数のtextを表示可能な最小限のサイズ
maxHeightとoptions.lineWidthの両方を引数で定義すると戻り値のcanvas.heightはmaxHeight + options.lineWidthになります。
const vTextcanvas = createVerticalTextCanvas('はろー', '400 40px sans-serif', { fillStyle: '#ff0000' });
context.drawImage(vTextcanvas, 0, 0);
引数のテキストが縦書きされたキャンバスを返します。
半角文字も縦書きされます。
createVerticalTextCanvas関数と同じ
createVerticalTextCanvas関数と同じ
const vTextcanvas = createAllVerticalTextCanvas('123 Hello', '400 40px sans-serif', { fillStyle: '#ff0000' });
context.drawImage(vTextcanvas, 0, 0);
引数のテキストの輪郭が縦書きされたキャンバスを返します。
ただし半角文字は横書きされます。
縦書きにしたい場合はcreateAllVerticalTextStrokeCanvas関数を使ってください。
| 名称 | 型 | 説明 |
|---|---|---|
| text | string | 縦書きにしたい文字列 |
| font | string | 太さ、大きさ、フォントファミリーの文字列 例： '400 40px sans-serif'
|
| options | object (省略可) | canvasのcontextに適応させたい設定など 例： { strokeStyle: '#00ff00', lineWidth: 3 }
|
| maxHeight | number (省略可) | テキストを描画する際の最大高さ。 CanvasRenderingContext2D:strokeTextメソッドの第4引数で使う。 |
Canvas
戻り値のCanvasのwidth, heightは引数のtextを表示可能な最小限のサイズ
maxHeightとoptions.lineWidthの両方を引数で定義すると戻り値のcanvas.heightはmaxHeight + options.lineWidthになります。
const vTextcanvas = createVerticalTextStrokeCanvas('はろー', '400 40px sans-serif', { strokeStyle: '#00ff00', lineWidth: 3 });
context.drawImage(vTextcanvas, 0, 0);
引数のテキストの輪郭が縦書きされたキャンバスを返します。
半角文字も縦書きされます。
createVerticalTextStrokeCanvas関数と同じ
createVerticalTextStrokeCanvas関数と同じ
const vTextcanvas = createAllVerticalTextStrokeCanvas('123 Hello', '400 40px sans-serif', { strokeStyle: '#00ff00', lineWidth: 3 });
context.drawImage(vTextcanvas, 0, 0);
createVerticalTextCanvas関数で生成されるキャンバスのwidthとheightを返します。
| 名称 | 型 | 説明 |
|---|---|---|
| text | string | 縦書きにしたい文字列 |
| font | string | 太さ、大きさ、フォントファミリーの文字列 例： '400 40px sans-serif'
|
| options | object (省略可) | canvasのcontextに適応させたい設定など 例： { letterSpacing: '10px' }
|
| maxHeight | number (省略可) | テキストを描画する際の最大高さ。 CanvasRenderingContext2D:fillTextメソッドの第4引数で使う。 |
{ width: キャンバスのwidth, height: キャンバスのheight }
const vTextcanvasSize = measureVerticalTextCanvasSize('はろー', '400 40px sans-serif', { letterSpacing: '10px' });
console.log(vTextcanvasSize.width, vTextcanvasSize.height);
createAllVerticalTextCanvas関数で生成されるキャンバスのwidthとheightを返します。
measureVerticalTextCanvasSize関数と同じ
measureVerticalTextCanvasSize関数と同じ
const vTextcanvasSize = measureAllVerticalTextCanvasSize('123 Hello', '400 40px sans-serif', { letterSpacing: '10px' });
console.log(vTextcanvasSize.width, vTextcanvasSize.height);
CSSを適用させる必要があるため、WebWorker内で使えないと思われます。
https://github.com/yuneco/canvas-draw-styled-text
MIT or WTFLP or くいなちゃんライセンス
