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

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

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

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

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

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

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

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

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

はじめに

この記事を読めば、JavaScriptで塗りつぶしを行う方法を身につけることができるようになります。

JavaScript初心者でも分かりやすいように、塗りつぶしの基本から応用例、注意点まで詳しく解説していきます。

ぜひ最後まで読んで、JavaScriptでの塗りつぶしをマスターしましょう。

JavaScriptでの塗りつぶしとは

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

デザイン性やインタラクティブ性を高めるために利用されることが多く、Webページ制作において重要な要素のひとつです。

JavaScriptでの塗りつぶしとは

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

デザイン性やインタラクティブ性を高めるために利用されることが多く、Webページ制作において重要な要素のひとつです。

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

○HTMLの準備

まずはHTMLでcanvas要素を用意しましょう。

canvas要素には、id属性を設定しておくことで、JavaScriptから簡単に要素を取得できます。

<!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>

○JavaScriptのコードを記述

次に、JavaScriptでcanvas要素を取得し、塗りつぶしを行うコードを記述します。

下記の例では、canvas要素に対して2Dの描画コンテキストを取得し、四角形を塗りつぶしています。

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

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

では、この基本的な方法をもとに、さまざまな塗りつぶしのサンプルコードを見ていきましょう。

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

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

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

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

上記のコードでは、塗りつぶし色を青に設定し、(50, 50)の位置に幅150px、高さ75pxの四角形を塗りつぶしています。

●サンプルコード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)の位置に半径50pxの円を塗りつぶしています。

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

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

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

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

上記のコードでは、塗りつぶし色を紫に設定し、フォントスタイルを「30px Arial」に設定し、(50, 50)の位置に「こんにちは!」というテキストを塗りつぶしています。

●サンプルコード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); // 四角形の位置とサイズを指定

上記のコードでは、線形グラデーションを作成し、開始位置は黄色、終了位置はオレンジ色に設定しています。

このグラデーションを塗りつぶしスタイルとして設定し、四角形を描画しています。

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

画像を使って塗りつぶすには、Imageオブジェクトを作成し、srcプロパティに画像の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); // 画像を描画
};

上記のコードでは、Imageオブジェクトを作成し、画像のURLを設定しています。

画像が読み込まれたときに、キャンバス全体に画像を描画しています。

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

アニメーションで塗りつぶしを行うには、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(); // アニメーションを開始

上記のコードでは、requestAnimationFrameメソッドを使用してアニメーションループを作成し、四角形のx座標を更新しながら描画しています。

●サンプルコード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); // 四角形の位置とサイズを指定
}

上記のコードでは、iが偶数の場合は緑色で塗りつぶし、奇数の場合は紫色で塗りつぶしを行っています。

●サンプルコード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); // 四角形の位置とサイズを指定

上記のコードでは、二つの四角形をオレンジ色で塗りつぶしています。

●サンプルコード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); // 四角形の位置とサイズを指定
};

上記のコードでは、画像を読み込んでパターンを作成し、そのパターンでキャンバス全体を塗りつぶしています。

●注意点と対処法

  • ブラウザによっては、塗りつぶしの色やグラデーションが異なることがあります。
    対処法として、一般的な色を使用するか、ブラウザごとに色を調整することが考えられます。
  • 画像を使った塗りつぶしでは、画像の読み込みが完了していないとパターンが正しく表示されません。
    img.onloadイベントを使って、画像の読み込みが完了した後に塗りつぶし処理を行うようにしましょう。
  • アニメーションで塗りつぶしを行う場合は、リクエストアニメーションフレームを使ってアニメーションを更新することが推奨されています。
    これにより、ブラウザのリフレッシュレートに合わせてアニメーションが更新されるため、効率的なアニメーションが可能です。
  • キャンバスのサイズが変更される場合は、塗りつぶしのサイズや位置も調整する必要があります。
    リサイズイベントを使って、キャンバスサイズが変更された際に塗りつぶし処理を更新するようにしましょう。

まとめ

JavaScriptで塗りつぶしを行う方法には、色やグラデーション、画像、カスタムパターンなど様々な方法があります。

また、アニメーションやマウス操作、条件に応じた塗りつぶしも可能です。

注意点としては、ブラウザの違いや画像の読み込み、キャンバスのサイズ変更などに対応することが重要です。

これらの方法を活用して、さまざまな塗りつぶし効果を実現しましょう。