HTML5のキャンバスでグラデーションの四角形を描画する方法-htmlチュートリアル-php.cn

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

yulia

リリース： 2018-10-19 17:44:45

オリジナル

3143 人が閲覧しました

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

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