ホームページ > 記事 > ウェブフロントエンド > HTML5のキャンバスでグラデーションの四角形を描画する方法
HTML5のキャンバスでグラデーションの四角形を描画する方法
- yuliaオリジナル
- 2018-10-19 17:44:453118ブラウズ
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>レンダリング:
##例 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のキャンバスでグラデーションの四角形を描画する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。