キャンバスのプロパティの秘密を明らかにする

canvas 属性の秘密を調べるには、具体的なコード例が必要です。

Canvas は、HTML5 の非常に強力なグラフィック描画ツールであり、これを使用して簡単に描画できます。 Web ページ 複雑なグラフィックス、ダイナミックな効果、ゲームなどを作成します。ただし、これを使用するには、Canvas の関連するプロパティとメソッドを理解し、それらの使用方法をマスターする必要があります。この記事では、Canvas の主要なプロパティのいくつかを検討し、読者がこれらのプロパティをどのように使用するかをより深く理解できるように、具体的なコード例を示します。

1. Canvas 属性

1. width と height

Canvas 要素の width 属性と height 属性は、描画面のサイズを決定します。どちらのプロパティもデフォルトは 300 で、設定することでキャンバス サイズを変更できます。これら 2 つのプロパティを設定すると、キャンバスのコンテンツがクリアされることに注意してください。

コード例:

<canvas id="myCanvas" width="500" height="500"></canvas>

2. getContext()

getContext() は Canvas のコア メソッドの 1 つで、さまざまな機能を提供するオブジェクトを返します。 Canvas 上に描画するためのメソッドとプロパティ。このメソッドにはパラメータが 1 つだけあり、コンテキスト タイプ (2d、webgl など) を指定します。

コード例:

let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");

3. style 属性

style 属性は、背景色、境界線のスタイルなど、Canvas 要素のスタイルを設定するために使用されます。 、幅など。このプロパティは描画内容には影響を与えないことに注意してください。

コード例:

<canvas id="myCanvas" width="500" height="500" style="background-color: #f2f2f2; border: 1px solid #000;"></canvas>

2. 描画プロパティ

1. fillStyle とストロークスタイル

fillStyle プロパティは、塗りつぶしを設定するために使用されます。 color、ストロークスタイルプロパティは線の色を設定するために使用されます。

コード例:

ctx.fillStyle = "#FF0000";
ctx.strokeSytle = "#000000";

2. lineWidth

lineWidth プロパティは、線の幅を設定するために使用されます。

コード例:

ctx.lineWidth = 5;

3. lineCap と lineJoin

lineCap プロパティは、線の端点のスタイルを設定するために使用されます。オプションの値は 3 つあります。 ：バット（平頭）、ラウンド（丸頭）、スクエア（四角頭）。 lineJoin 属性は、線の交差のスタイルを設定するために使用され、miter (マイター)、round (丸い接続)、bevel (直接) の 3 つのオプションの値があります。

コード例:

ctx.lineCap = "round";
ctx.lineJoin = "round";

3. 描画メソッド

1. fillRect とストロークRect

fillRect メソッドは塗りつぶしを描画するために使用されます。 Rectangle、StrokeRect 中空の長方形を描画するために使用されるメソッド。

コード例:

ctx.fillRect(50, 50, 100, 100);
ctx.strokeRect(50, 50, 100, 100);

2. fillText とストロークText

fillText メソッドは塗りつぶしテキストの描画に使用され、ストロークText メソッドは中空の描画に使用されます。文章。

コード例:

ctx.font = "30px Arial";
ctx.fillStyle = "#000000";
ctx.fillText("Hello World!", 100, 100);
ctx.strokeStyle = "#FF0000";
ctx.strokeText("Hello World!", 100, 100);

3. beginPath、moveTo、lineTo、arc、closePath

これらのメソッドを組み合わせて、複雑なグラフィックスを描画できます。 beginPath メソッドはパスの描画を開始するために使用され、moveTo メソッドは指定された座標にブラシを移動するために使用され、lineTo メソッドは座標に基づいて直線を描画するために使用され、arc メソッドは円弧を描画するために使用されます。そして、closePath メソッドを使用してパスを終了します。

コード サンプル:

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 200);
ctx.arc(100, 200, 50, 0, 2 * Math.PI, false);
ctx.closePath();
ctx.fillStyle = "#FF0000";
ctx.fill();

4. 概要

この記事の導入を通じて、読者は Canvas のいくつかのコア プロパティをより深く理解し、コード例は、それらを使用して巧みに描画されています。もちろん、これは Canvas の氷山の一角にすぎず、将来使用する場合には、その能力をよりよく活用するために、引き続き学習、探索、練習を続ける必要があります。

以上がキャンバスのプロパティの秘密を明らかにするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。