JavaScriptを使用してキャンバスタイプのテキストにデフォルトの水平スケーリングを追加するにはどうすればよいですか?

キャンバス コンテキストにアクセスし、scale プロパティを特定の値に設定することで、キャンバス タイプのテキストにデフォルトの水平スケーリングを追加できます。これは、コンテキストのzoomメソッドを呼び出し、必要な水平ズーム値を渡すことによって実現されます。これを行うと、キャンバス上に描画されるすべてのテキストにデフォルトの水平スケーリングが適用されます。

HTMLキャンバス

HTML Canvas は、Web ページ上に動的でインタラクティブなグラフィック、グラフ、アニメーションを作成するために使用できる 2D 描画面です。これは、開発者が JavaScript を使用してグラフィックを描画できるようにする HTML 要素です。

canvas 要素はグラフィックスのコンテナーであり、canvas API を使用して図形、テキスト、および画像を描画できます。これは、開発者が外部ライブラリやプラグインを使用せずに、Web 上でリッチでインタラクティブなユーザー エクスペリエンスを作成できる強力なツールです。

JavaScript を使用してキャンバス タイプのテキストにデフォルトの水平スケーリングを追加するには、次の手順に従います。 −

キャンバス要素を作成し、その幅と高さを設定します。
getContext() メソッドを呼び出して、キャンバスの 2D コンテキストを取得します。
fillText() メソッドを使用して、キャンバス上にテキストを描画します。
2D コンテキストでscale() メソッドを呼び出し、スケーリング係数を最初の引数として渡すことにより、デフォルトの水平スケーリングを設定します。
fillText() メソッドを使用して、キャンバス上のテキストを再描画します。
以下は、このタスクを実行する方法を示す例です -

Example

Example

説明

説明

この例では、テキスト「Hello World!」がデフォルトの水平スケーリング 1.5 でキャンバス上に描画されます。これは、テキストが水平方向に 1.5 倍に拡大縮小され、キャンバス上で広く表示されることを意味します。テキストは 2 回描画されます。1 回目は通常のサイズで、2 回目は 1.5 倍のサイズで描画されます。

以上がJavaScriptを使用してキャンバスタイプのテキストにデフォルトの水平スケーリングを追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。