HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLキャンバスfillStyleプロパティ

HTMLキャンバスのfillStyle（）プロパティは、描画の色、グラデーション、またはパターンを設定するために使用されます。デフォルトは＃000000です。 要素を使用すると、JavaScriptを使用してWebページにグラフィックを描画できます。すべてのキャンバスには、キャンバスの高さと幅を表す2つの要素があります。つまり、それぞれ高さと幅です。

以下は構文です-

ctx.fillStyle=color|gradient|pattern;

上記の値には、-

が含まれます
  • 色： CSSの色である図面の塗りつぶしの色。
  • グラデーション： 図面を塗りつぶす線形または放射状のグラデーションオブジェクト
  • パターン： 図面を塗りつぶすパターンオブジェクト。

ここで、canvasのfillStyle（）プロパティを実装する例を見てみましょう-

例

<!DOCTYPE html>
<html>
<body>
<canvas id="newCanvas" width="500" height="350" style="border:2px solid orange;">
</canvas>
<script>
   var c = document.getElementById("newCanvas");
   var ctx = c.getContext("2d");
   var newGrad =ctx.createLinearGradient(0, 0, 130, 0);
   newGrad.addColorStop(0, "blue");
   newGrad.addColorStop(0.8, "green");
   ctx.fillStyle = newGrad;
   ctx.fillRect(0, 0, 500, 350);
</script>
</body>
</html>

出力

HTMLキャンバスfillStyleプロパティ


  1. HTMLDOMlangプロパティ

    HTML DOM langプロパティは、‘en’などの言語コードを表す文字列を返す/設定します 「英語」の場合 要素のコンテンツの。 構文 以下は構文です- 言語コードを返す HTMLElementObject.lang langの設定 言語コードの属性 HTMLElementObject = ‘lang_code’ 例 HTML DOM langの例を見てみましょう プロパティ- <!DOCTYPE html> <html> <head> <title>HTML DOM lang</title&g

  2. HTML DOMlivalueプロパティ

    Li valueプロパティは、要素のvalue属性の値を返す/設定します。 構文 以下は構文です- 値の戻り値 属性 liObject.value の価値 属性値セット liObject.value = ‘string’ Li値の例を見てみましょう プロパティ- 例 <!DOCTYPE html> <html> <head> <title>HTML DOM value</title> <style>    form {       w