ホームページ  >  記事  >  ウェブフロントエンド  >  HTML5のキャンバスでグラデーションの四角形を描画する方法

HTML5のキャンバスでグラデーションの四角形を描画する方法

yulia
yuliaオリジナル
2018-10-19 17:44:453131ブラウズ

Canvas は HTML5 の新機能です。フロントエンド開発者は、Canvas を使用してグラフィックを描画する方法を知っていますか?この記事では、キャンバスを使用して四角形とグラデーション四角形を描画する方法について説明します。興味のある方は参考にしてください。

タグはグラフィックの描画に使用できますが、 タグはグラフィックの単なるコンテナであり、その効果は JavaScript スクリプトを通じて実現する必要があります。 JavaScript スクリプトのヘルプ。キャンバスを使用して、線、円、長方形、文字などを描くことができます。

例 1: Canvas を使用して赤い四角形を描画します。 具体的な手順は次のとおりです。

ステップ 1: document.getElementById() を使用して 要素を検索します。

2 番目のステップ ステップ: getContext("2d") を使用してコンテキスト オブジェクトを作成します。

ステップ 3: fillStyle 属性で四角形の色を設定できます。この例では、赤に設定されています。 fillRect(x,y,width,height) メソッドを使用して塗りつぶされた四角形を描画できます。x は四角形の左上隅の X 軸座標を表し、y は左上隅の Y 軸座標を表します。長方形の幅、幅は長方形の幅、高さは長方形の高さを表します。

完全なコードは次のとおりです。

<body>
  <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>
</body>
<script type="text/javascript">  
  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");
  ctx.fillStyle="#FF0000";
  ctx.fillRect(25,10,150,80);
</script>

レンダリング:

HTML5のキャンバスでグラデーションの四角形を描画する方法##例 2: キャンバスを使用してグラデーションの四角形を描画します。コードは次のとおりです。

<body>
  <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>
</body>
<script type="text/javascript">  
  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");  
  // Create gradient
  var grd=ctx.createLinearGradient(0,0,200,0);
  grd.addColorStop(0,"orange");
  grd.addColorStop(1,"red");  
  // Fill with gradient
  ctx.fillStyle=grd;
  ctx.fillRect(25,10,150,80);
</script>

createLinearGradient(x,y, x1,y1) は、グラデーションを使用する場合に線形グラデーションを作成できます。 2 つ以上の色を使用する必要があります。

addColorStop() メソッドはカラー ストップを示します。値は 0 ~ 1 です。

Use fillStyle 長方形の色を設定し、fillRect(x, y,width,height) を使用して長方形を描画します。

効果は図に示すとおりです。

HTML5のキャンバスでグラデーションの四角形を描画する方法上記では使用方法を詳しく説明しています。キャンバス上に四角形とグラデーション四角形を描画するのは比較的簡単です。初心者でも、より見栄えの良いグラフィックを描画できるかどうかを試してみてください。この記事が役立つことを願っています。

その他の関連チュートリアルについては、

Html5 ビデオ チュートリアルをご覧ください

以上がHTML5のキャンバスでグラデーションの四角形を描画する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。