CanvasRenderingContext2D: direction プロパティ
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
CanvasRenderingContext2D.direction
はキャンバス 2D API のプロパティで、テキストを描画する際に使用する現在の書字方向を指定します。
値
例
書字方向の変更
この例では、 2 つのテキストを描画しています。最初のものは左から右へ、 2 番目は右から左へ描画します。ltr
の "Hi!" は rtl
では "!Hi" になることに注意してください。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.font = "48px serif";
ctx.fillText("Hi!", 150, 50);
ctx.direction = "rtl";
ctx.fillText("Hi!", 150, 130);
結果
仕様書
Specification |
---|
HTML # dom-context-2d-direction-dev |
ブラウザーの互換性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
direction |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
関連情報
- このメソッドを定義するインターフェイスである
CanvasRenderingContext2D