読み込み中...

JavaScriptで塗りつぶしをマスター！10のサンプルコードで応用力UP

JavaScriptで塗りつぶしを行うイメージ図 JS
2023.04.16
この記事は約13分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

JavaScriptを用いた塗りつぶし技術は、Webデザインの分野で欠かせない要素となっています。

この記事では、JavaScriptによる塗りつぶしの基本から応用まで、詳細に解説していきます。

初心者の方でも理解しやすいよう、段階的に説明を進めていきますので、最後までお付き合いください。

●JavaScriptでの塗りつぶしとは

JavaScriptによる塗りつぶしとは、主にHTMLのcanvas要素を活用して、図形やテキストなどを特定の色やパターンで彩色することを指します。

この技術は、Webページの視覚的な魅力を高め、ユーザーとのインタラクションを豊かにするために広く使用されています。

Webデザイナーやフロントエンド開発者にとって、塗りつぶしのスキルを習得することは非常に重要です。

●塗りつぶしを行うための基本的な方法

JavaScriptで塗りつぶしを行うためには、まずHTMLとJavaScriptの基本的な準備が必要です。

この準備を適切に行うことで、様々な塗りつぶし効果を実現する土台を作ることができます。

ここでは、HTMLの設定とJavaScriptのコード記述について詳しく説明していきます。

○HTMLの準備

まずは、HTMLファイルにcanvas要素を設置することから始めましょう。

canvas要素にid属性を付与することで、JavaScriptから容易にこの要素にアクセスできるようになります。

ここでは、基本的なHTMLの構造を紹介します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JavaScriptで塗りつぶしを試す</title>
</head>
<body>
  <canvas id="myCanvas" width="500" height="300"></canvas>
  <script src="sample.js"></script>
</body>
</html>

このHTMLファイルでは、幅500ピクセル、高さ300ピクセルのcanvas要素を作成しています。

また、JavaScriptファイル（sample.js）も読み込んでいます。

○JavaScriptのコードを記述

次に、JavaScriptファイルにコードを記述していきます。

canvas要素を取得し、2D描画コンテキストを設定した後、塗りつぶしの処理を行います。

ここでは、赤色の四角形を描画する基本的な例を紹介します。

// canvas要素を取得
const canvas = document.getElementById('myCanvas');
// 2Dの描画コンテキストを取得
const ctx = canvas.getContext('2d');

// 四角形を塗りつぶす
ctx.fillStyle = 'red'; // 塗りつぶし色を設定
ctx.fillRect(50, 50, 100, 100); // 四角形の位置とサイズを指定

このコードでは、canvas要素を取得し、2D描画コンテキストを設定しています。

その後、fillStyleプロパティで塗りつぶし色を赤に設定し、fillRectメソッドで四角形を描画しています。

それでは、この基本的な方法を踏まえて、様々な塗りつぶしの技法を見ていきましょう。

○サンプルコード1：四角形の塗りつぶし

四角形を塗りつぶす際は、fillStyleプロパティで色を指定し、fillRectメソッドで四角形の位置とサイズを決定します。

次のコードは、青色の四角形を描画する例です。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'blue'; // 塗りつぶし色を設定
ctx.fillRect(50, 50, 150, 75); // 四角形の位置とサイズを指定

このコードを実行すると、キャンバス上の座標(50, 50)を左上の起点として、幅150ピクセル、高さ75ピクセルの青い四角形が描画されます。

○サンプルコード2：円の塗りつぶし

円を塗りつぶす場合は、少し異なるアプローチが必要です。

beginPathメソッドでパスの開始を宣言し、arcメソッドで円の形状を定義した後、fillメソッドで塗りつぶしを行います。

ここでは緑色の円を描画する例を見てみましょう。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'green'; // 塗りつぶし色を設定
ctx.beginPath(); // パスを開始
ctx.arc(100, 100, 50, 0, 2 * Math.PI); // 円の中心座標、半径、始点・終点の角度を指定
ctx.fill(); // 塗りつぶしを実行

このコードは、キャンバス上の座標(100, 100)を中心として、半径50ピクセルの緑色の円を描画します。

arcメソッドの最後の2つの引数は、円の始点と終点の角度を指定しています。

○サンプルコード3：テキストの塗りつぶし

テキストを塗りつぶす際は、まずfontプロパティでフォントのスタイルを設定し、その後fillTextメソッドでテキストを描画します。

ここでは紫色のテキストを描画する例を見てみましょう。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'purple'; // 塗りつぶし色を設定
ctx.font = '30px Arial'; // フォントスタイルを設定
ctx.fillText('こんにちは！', 50, 50); // テキストの描画位置を指定

このコードを実行すると、キャンバス上の座標(50, 50)を基準点として、30ピクセルサイズのArialフォントで「こんにちは！」という紫色のテキストが描画されます。

○サンプルコード4：グラデーションで塗りつぶし

グラデーションによる塗りつぶしは、より洗練された視覚効果を生み出します。

createLinearGradientメソッドまたはcreateRadialGradientメソッドでグラデーションオブジェクトを作成し、addColorStopメソッドで色の変化を定義します。

ここでは黄色からオレンジ色へのグラデーションを作成する例を紹介します。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 線形グラデーションを作成
const gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, 'yellow'); // 開始位置の色を設定
gradient.addColorStop(1, 'orange'); // 終了位置の色を設定

ctx.fillStyle = gradient; // 塗りつぶしスタイルにグラデーションを設定
ctx.fillRect(50, 50, 200, 100); // 四角形の位置とサイズを指定

このコードは、左端が黄色、右端がオレンジ色のグラデーションを持つ四角形を描画します。

グラデーションの方向はcreateLinearGradientメソッドの引数によって決定されます。

○サンプルコード5：画像を使った塗りつぶし

画像を用いて塗りつぶしを行うことで、より複雑で独特な視覚効果を生み出すことができます。

この技法では、Imageオブジェクトを生成し、画像のURLを設定した後、onloadイベントを使用して画像の読み込み完了時に描画処理を実行します。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

const img = new Image(); // Imageオブジェクトを作成
img.src = 'your_image_url.jpg'; // 画像のURLを設定

img.onload = function() { // 画像が読み込まれたときの処理
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height); // 画像を描画
};

このコードは、指定された画像をキャンバス全体に描画します。

画像のサイズがキャンバスと異なる場合、自動的にリサイズされます。

○サンプルコード6：アニメーションで塗りつぶし

アニメーションを用いた塗りつぶしは、動的でインタラクティブな要素をWebページに追加するのに効果的です。

requestAnimationFrameメソッドを使用してアニメーションループを作成し、繰り返し描画処理を行うことで実現します。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

let x = 0; // 四角形の初期位置

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // キャンバスをクリア

  ctx.fillStyle = 'blue'; // 塗りつぶしスタイルを設定
  ctx.fillRect(x, 50, 100, 100); // 四角形の位置とサイズを指定

  x += 2; // 四角形のx座標を更新

  requestAnimationFrame(animate); // 次の描画をリクエスト
}

animate(); // アニメーションを開始

このコードは、青い四角形が右方向に移動するアニメーションを生成します。

clearRectメソッドで前のフレームを消去し、新しい位置に四角形を描画することで、滑らかな動きを実現しています。

○サンプルコード7：マウス操作で塗りつぶし

ユーザーのマウス操作に応じて塗りつぶしを行うことで、インタラクティブな要素を追加できます。

マウスイベントをリッスンし、マウスの位置に応じて描画処理を実行します。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

canvas.addEventListener('mousemove', (event) => { // マウスが動いたときの処理
  const mouseX = event.clientX - canvas.offsetLeft;
  const mouseY = event.clientY - canvas.offsetTop;

  ctx.fillStyle = 'red'; // 塗りつぶしスタイルを設定
  ctx.fillRect(mouseX - 25, mouseY - 25, 50, 50); // 四角形の位置とサイズを指定
});

このコードは、マウスが動く度に赤い四角形を描画します。

マウスカーソルが四角形の中心になるよう、位置を調整しています。

○サンプルコード8：条件に応じた塗りつぶし

特定の条件に基づいて塗りつぶしのスタイルを変更することで、データの視覚化やゲーム開発などに応用できます。

条件分岐を使用して、塗りつぶしのスタイルを動的に変更します。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

for (let i = 0; i < 10; i++) {
  if (i % 2 === 0) {
    ctx.fillStyle = 'green'; // 偶数の場合は緑色で塗りつぶす
  } else {
    ctx.fillStyle = 'purple'; // 奇数の場合は紫色で塗りつぶす
  }

  ctx.fillRect(20 * i, 50, 20, 100); // 四角形の位置とサイズを指定
}

このコードは、偶数番目の四角形を緑色、奇数番目の四角形を紫色で塗りつぶします。

結果として、緑と紫の縞模様が生成されます。

○サンプルコード9：複数の要素を塗りつぶし

複数の要素を同時に塗りつぶすことで、複雑な図形やパターンを作成できます。

各要素に対して個別に塗りつぶし処理を行います。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'orange'; // 塗りつぶしスタイルを設定

// 最初の四角形
ctx.fillRect(50, 50, 100, 100); // 四角形の位置とサイズを指定

// 二つ目の四角形
ctx.fillRect(200, 50, 100, 100); // 四角形の位置とサイズを指定

このコードは、2つのオレンジ色の四角形を描画します。同じ塗りつぶしスタイルを使用していますが、位置を変えることで別々の要素として認識されます。

○サンプルコード10：カスタムパターンで塗りつぶし

カスタムパターンを使用することで、独自のテクスチャや背景を作成できます。

createPatternメソッドを使用してパターンを作成し、それを塗りつぶしスタイルとして使用します。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

const img = new Image(); // 画像を作成
img.src = 'path/to/your/image.png'; // 画像のパスを設定

img.onload = () => {
  const pattern = ctx.createPattern(img, 'repeat'); // パターンを作成
  ctx.fillStyle = pattern; // 塗りつぶしスタイルにパターンを設定
  ctx.fillRect(0, 0, canvas.width, canvas.height); // 四角形の位置とサイズを指定
};

このコードは、指定された画像を繰り返しパターンとして使用し、キャンバス全体を塗りつぶします。

●注意点と対処法

JavaScriptでの塗りつぶしを実装する際には、いくつか注意点があります。

まず、ブラウザによって塗りつぶしの色やグラデーションの表示が異なる場合があります。

この問題に対処するには、一般的に広くサポートされている色を使用するか、ブラウザごとに細かな調整を行うことが有効です。

また、画像を用いた塗りつぶしでは、画像の読み込みが完了していないとパターンが正しく表示されないことがあります。こ

の問題を回避するために、img.onloadイベントを使用して、画像の読み込みが完了した後に塗りつぶし処理を実行するようにしましょう。

アニメーションを伴う塗りつぶしを実装する場合は、requestAnimationFrameメソッドを使用してアニメーションを更新することが推奨されます。

このアプローチを採用することで、ブラウザのリフレッシュレートに合わせてアニメーションが更新され、スムーズで効率的な動きを実現できます。

キャンバスのサイズが動的に変更される可能性がある場合、塗りつぶしのサイズや位置も適切に調整する必要があります。

ウィンドウのリサイズイベントを監視し、キャンバスサイズが変更された際に塗りつぶし処理を更新する仕組みを実装することで、レスポンシブな塗りつぶし効果を実現できます。

まとめ

JavaScriptを用いた塗りつぶしには、単色での塗りつぶしからグラデーション、画像を使用したパターン、カスタムパターンまで、多様な手法が存在します。

さらに、アニメーションやマウス操作と組み合わせることで、インタラクティブな要素を追加することも可能です。

本記事で紹介した手法や注意点を参考に、JavaScriptによる塗りつぶしの技術を磨いていくことで、より洗練されたWebデザインやインタラクティブなコンテンツの制作が可能となります。

塗りつぶしは単純な技術に見えて奥が深く、創造性を存分に発揮できる分野です。

ぜひ、これらの手法を自身のプロジェクトに取り入れ、独自の表現を追求してみてください。