HTML5 での Canvas 学習ノート: Canvas

1. HTML の Canvas 描画におけるストロークスタイルとフィルスタイルの違いは何ですか?

2. キャンバス内の特定の色を透明に設定するにはどうすればよいですか?

3. H5 キャンバスのストロークRectパラメータが10進数の場合、どのように処理すればよいですか?

4. H5 Canvas で丸みを帯びた長方形のフレームを描くにはどうすればよいですか?

5. 黒から白など、JSで特定の色の反対の色を取得する方法

6. JSプログラミングでbox-shadowプロパティを変更する方法

7. マウスでラベルのテキストを選択することはできません。

8. ラベルを無効に設定します

1. HTML の Canvas 描画におけるストロークスタイルとフィルスタイルの違いは何ですか?

HTML Canvas 要素では、ストロークスタイルとフィルスタイルは、描画の線の色と塗りつぶしの色を設定するために使用される属性です。

ストロークスタイル: 描画の線の色を設定するために使用されます。CSS カラー名、RGB、RGBA、16 進数などのさまざまなカラー値を受け入れることができます。デフォルトは「#000000」（黒）です。
fillStyle: 描画の塗りつぶしの色を設定するために使用されます。また、CSS カラー名、RGB、RGBA、16 進数など、さまざまなカラー値を受け入れることもできます。デフォルトは「#000000」（黒）です。

違い：

グラフの境界線を描画する色を設定するにはストロークスタイルを使用し、グラフ内部を塗りつぶす色を設定するにはfillStyleを使用します。
描画メソッドを使用して図形を描画する場合、strokeStyle を使用して図形の境界線の色を設定し、fillStyle を使用して図形の塗りつぶしの色を設定できます。ストロークスタイルのみが設定され、フィルスタイルが設定されていない場合、シェイプには境界線のみがあり、塗りつぶしの色はありません。fillStyle のみが設定され、strokingStyle が設定されていない場合、シェイプには塗りつぶしの色のみが設定され、境界線は設定されません。
ストロークスタイルとフィルスタイルは、CSS カラー名、RGB、RGBA、16 進数などの同じカラー値タイプを受け入れることができるため、同じカラー値を使用して境界線と塗りつぶしのカラーを設定できます。ただし、異なる色の値を使用して境界線と塗りつぶしの色を設定し、異なる効果を実現することもできます。

概要: 線の色の設定にはストロークスタイルが使用され、塗りつぶしの色の設定にはfillStyleが使用されます。これらは、キャンバス描画で境界線と塗りつぶしを設定するための重要な属性です。異なる色の値を設定することにより、異なる描画効果を実現できます。

2. キャンバス内の特定の色を透明に設定するにはどうすればよいですか?

キャンバス内の特定の色を透明に設定するには、次の手順に従います。

Canvas のコンテキストオブジェクトを取得する: getContext メソッドを使用して、Canvas のコンテキストオブジェクトを取得します。次に例を示します。

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

getImageData メソッドを使用して、Canvas 上のピクセルデータを取得します。 getImageData メソッドを使用して、Canvas 上の指定された領域のピクセルデータを取得します。画像データの開始点、幅、高さを指定する必要があります。たとえば、キャンバス全体のピクセルデータを取得するには、次のようにします。

var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

ピクセルデータを走査してカラー値を変更します。ピクセルデータを走査して透明として設定する色を見つけ、その対応するカラー値を透明カラー値 (RGBA の値は 0) に変更します。ピクセルデータは 1 次元配列であり、4 つの要素ごとにピクセルの RGBA 値を表します。たとえば、赤色の値を持つピクセルを透明に設定するには、次のようにします。

for (var i = 0; i < imageData.data.length; i += 4) {
  var red = imageData.data[i];
  var green = imageData.data[i + 1];
  var blue = imageData.data[i + 2];
  
  if (red === 255 && green === 0 && blue === 0) { // 判断颜色是否为红色
    imageData.data[i + 3] = 0; // 设置透明度为0
  }
}

変更されたピクセルデータを Canvas に再描画します。 putImageData メソッドを使用して、変更されたピクセルデータを Canvas に再描画します。例えば：

ctx.putImageData(imageData, 0, 0);

これにより、キャンバス内の指定された色が透明に設定されます。なお、Canvasのピクセルデータは左上隅を原点とし、右水平がx軸の正方向、垂直下がy軸の正方向となります。同時に、Canvas 内の画像データは画像データオブジェクト ImageData に保存され、ImageData のピクセルデータを変更することで Canvas グラフを変更できます。

3. H5 キャンバスのストロークRectパラメータが10進数の場合、どのように処理すればよいですか?

HTML5 Canvas では、StrokeRect メソッドを使用して長方形の境界線を描画します。これは、長方形の左上隅の x 座標、左上隅の y 座標、幅、および高さの 4 つのパラメーターを受け入れます。

渡されたパラメータが小数の場合、Canvas は小数値を切り捨てて描画します。つまり、10 進数値は自動的に整数に変換されます。

たとえば、ストロークRectパラメータが小数値に設定されている場合は、次のようになります。

ctx.strokeRect(10.5, 20.7, 30.9, 40.2);

Canvas はパラメータを整数値に変換します。

ctx.strokeRect(10, 20, 30, 40);

そのため、パラメーターが 10 進数であっても整数であっても、Canvas は描画のためにそれを整数値に変換します。正確な小数値の四角形を描画する必要がある場合は、lineTo やストロークなどの他のメソッドを使用して手動で描画できます。

4. H5 Canvas で丸みを帯びた長方形のフレームを描くにはどうすればよいですか?

HTML5 Canvas には、角丸長方形を描画する直接コマンドはありません。ただし、角丸長方形を描画する効果を実現する方法がいくつかあります。

arcTo メソッドを使用します。arcTo メソッドは円弧を描くことができ、複数の円弧を組み合わせることで角丸長方形を実現できます。具体的な手順は次のとおりです:
a. moveTo メソッドを使用して、ブラシを四角形の開始点に移動します。
b. lineTo メソッドと arcTo メソッドを使用して、4 つの辺と 4 つの丸い角を描画します。
c. ストロークまたは塗りつぶしの方法を使用して、長方形を描画します。

角丸長方形を描画する例を次に示します。
```
function drawRoundRect(ctx, x, y, width, height, radius) {
  ctx.beginPath();
  ctx.moveTo(x + radius, y);
  ctx.lineTo(x + width - radius, y);
  ctx.arcTo(x + width, y, x + width, y + radius, radius);
  ctx.lineTo(x + width, y + height - radius);
  ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);
  ctx.lineTo(x + radius, y + height);
  ctx.arcTo(x, y + height, x, y + height - radius, radius);
  ctx.lineTo(x, y + radius);
  ctx.arcTo(x, y, x + radius, y, radius);
  ctx.stroke();
}
```
quadraticCurveTo メソッドを使用する:quadraticCurveTo メソッドは 2 次ベジェ曲線を描画でき、複数の 2 次ベジェ曲線を組み合わせて角丸長方形を実現することもできます。具体的な手順は次のとおりです:
a. moveTo メソッドを使用して、ブラシを四角形の開始点に移動します。
b.quadraticCurveTo メソッドを使用して、4 つの辺を持つ丸い円弧を描きます。
c. ストロークまたは塗りつぶしの方法を使用して、長方形を描画します。

以下は、quadraticCurveTo メソッドを使用して角丸長方形を描画する例です。
```
function drawRoundRect(ctx, x, y, width, height, radius) {
  ctx.beginPath();
  ctx.moveTo(x + radius, y);
  ctx.lineTo(x + width - radius, y);
  ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
  ctx.lineTo(x + width, y + height - radius);
  ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
  ctx.lineTo(x + radius, y + height);
  ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
  ctx.lineTo(x, y + radius);
  ctx.quadraticCurveTo(x, y, x + radius, y);
  ctx.stroke();
}
```

どちらの方法も角丸長方形のボックスを描画するために使用できます。どの方法を選択するかは、個人のニーズと好みによって異なります。

5. 黒から白など、JSで特定の色の反対の色を取得する方法

色の反対を取得するには、ある程度の数学と色空間の知識があれば実行できます。

RGB 色空間の場合、次の手順を実行すると、色の反対を取得できます。

カラー値を RGB コンポーネントに変換する: カラー値を赤、緑、青の 3 成分値に変換します。たとえば、16 進数の色値「#000000」(黒)の場合、赤、緑、青の成分の値はそれぞれ 0、0、0 になります。
反対色の RGB 成分を計算する: 最大値 (255) から各成分の値を減算して、反対色の RGB 成分値を取得します。たとえば、黒の場合、反対色の赤、緑、青の成分の値はそれぞれ 255、255、255 です。
反対色の RGB 成分値をカラー値に結合する: 計算された反対色の赤、緑、青の成分値を 16 進数に変換し、カラー値に結合します。例えば、反対色は「#FFFFFF」(白)です。

以下は、色の反対を取得する JavaScript 関数です。

function getInverseColor(color) {
  // 去除颜色值中的 # 号
  color = color.replace("#", "");

  // 将颜色值转换为 RGB 分量
  var red = parseInt(color.substr(0, 2), 16);
  var green = parseInt(color.substr(2, 2), 16);
  var blue = parseInt(color.substr(4, 2), 16);

  // 计算相反颜色的 RGB 分量
  var inverseRed = 255 - red;
  var inverseGreen = 255 - green;
  var inverseBlue = 255 - blue;

  // 将相反颜色的 RGB 分量值组合为颜色值
  var inverseColor = "#" + (inverseRed.toString(16)).padStart(2, "0") + (inverseGreen.toString(16)).padStart(2, "0") + (inverseBlue.toString(16)).padStart(2, "0");

  return inverseColor;
}

使用例:

var color = "#000000"; // 黑色
var inverseColor = getInverseColor(color); // 获取黑色的相反颜色
console.log(inverseColor); // 输出 "#FFFFFF"（白色）

関数を呼び出して色の値を渡すことで、getInverseColor その色の逆数を取得できます。この関数は、入力カラー値が RGB 形式であり、透明度が含まれていないことを前提としていることに注意してください。カラー値に別の形式がある場合、または透明度が含まれている場合は、必要に応じて適切に変更します。

6. JSプログラミングでbox-shadowプロパティを変更する方法

JavaScript を使用して要素のプロパティを動的に変更する box-shadow と、要素の影を変更するような効果が得られます。以下に例を示します。

HTML 構造:

<div id="myElement">这是一个带阴影的元素</div>
<button onclick="changeBoxShadow()">改变阴影</button>

CSS スタイル:

#myElement {
  width: 200px;
  height: 200px;
  background-color: #f1f1f1;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

JavaScript コード:

function changeBoxShadow() {
  var myElement = document.getElementById("myElement");
  myElement.style.boxShadow = "5px 5px 10px rgba(0, 0, 0, 0.3)";
}

上記のコードでは、 changeBoxShadow ボタンがクリックされたときに呼び出される関数を JavaScript 経由で作成しました。関数内で、 myElement 要素への参照を取得し、 box-shadow そのプロパティを新しいシャドウスタイルに設定します。

ボタンをクリックすると、 changeBoxShadow 要素の影の効果を変更する関数を呼び出すことができます。この例では、影のスタイルをから2px 2px 5px rgba(0, 0, 0, 0.5) 変更します 5px 5px 10px rgba(0, 0, 0, 0.3)。

影のオフセット、ぼかしの半径、色、透明度など、実際のニーズに応じて影のスタイルを変更できます。プロパティを変更することで box-shadow 、要素の影を動的に変更する効果を得ることができます。

7. マウスでラベルのテキストを選択することはできません。

.label1 {
            display: block;
            width: 130px;
            /* border: 1px solid red; */
            text-align: right;
            margin-left: 70px;
            /* user-select: none;   不允许鼠标选择文字*/
        }

8. ラベルを無効に設定します

HTML では、<label> 要素自体には disabled 属性がありません。disabled 属性は多くの場合、フォーム要素 ( <input>、、<select> など <textarea>) に適用され、ユーザーによるその要素との対話を無効にします。

要素を無効にする場合は <label> 、CSS を使用して無効な外観をシミュレートできます。たとえば、 pointer-events: none; ユーザーが <label> 要素を操作できないようにしたり、テキストの色などをグレーアウトして無効な状態を示したりするために使用できます。以下に例を示します。

<label id="myLabel" for="myInput">我是一个标签</label>

#myLabel {
  color: #999;
  pointer-events: none;
}

上の例では、pointer-events: none; スタイル設定によりユーザーが <label> 要素を操作できなくなり、要素が無効になっているように見えます。グレーに設定すると、 color 無効な外観がさらに強調されます。

<label> これは単にシミュレートされた効果であり、実際に要素自体を無効にするわけではないことに注意してください。<label> 実際に要素とのユーザー操作を無効にする必要がある場合は、他の要素または JavaScript を使用して、目的の無効状態を実現することを検討してください。