canvas 色の付け方とグラデーション様々なスタイルの設定方法

今回は、図形に色を付けたり、グラデーションにしたり、その他の様々なスタイルの設定方法について見ていきます。

図形に色をつける
1. fillStyle
2. strokeStyle
透明度
線
グラデーション
パターン
影
1. shadowOffsetX
2. shadowOffsetY
あとがき

図形に色をつける

すでに前回の例で見ていますが、図形に色を付けるには以下のプロパティを使用します。

fillStyle：図形を塗りつぶします
strokeStyle：輪郭線を塗りつぶします

カラーの指定は、CSSと同じカラー指定が利用出来ます。

fillStyle

    <canvas id="sample11" width="400px" height="400px"></canvas>

const canvas11 = document.getElementById('sample11');
const cont11 = canvas11.getContext('2d');

for (let i = 0; i < 10; i++) {
  for (let r = 0; r < 10; r++) {
    cont11.fillStyle =
      'rgb(' + (255 - 25.5 * i) + ',' + (255 - 25.5 * r) + ',0)';
    cont11.fillRect(r * 30, i * 30, 30, 30);
  }
}

strokeStyle

const canvas12 = document.getElementById('sample12');
const cont12 = canvas12.getContext('2d');

for (let i = 0; i < 10; i++) {
  for (let r = 0; r < 10; r++) {
    cont12.strokeStyle =
      'rgb(' + (255 - 25.5 * i) + ',' + (255 - 25.5 * r) + ',0)';
    cont12.beginPath();
    cont12.arc(12.5 + r * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
    cont12.stroke();
  }
}

透明度

図形に透明度を設定する時は以下のプロパティを使用します。

globalAlpha = 0.0~1.0の間

const canvas13 = document.getElementById('sample13');
const cont13 = canvas13.getContext('2d');

cont13.fillStyle = '#ff0000';
cont13.fillRect(0, 0, 75, 75);
cont13.fillStyle = '#ffff00';
cont13.fillRect(75, 0, 75, 75);
cont13.fillStyle = '#008000';
cont13.fillRect(0, 75, 75, 75);
cont13.fillStyle = '#0000ff';
cont13.fillRect(75, 75, 75, 75);

cont13.fillStyle = '#FFF';
cont13.globalAlpha = 0.3;

for (let i = 0; i < 7; i++) {
  cont13.beginPath();
  cont13.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
  cont13.fill();
}

rgbaを使用して透明度を設定することのほうが多いと思います。

線

線のスタイルを指定するプロパティは以下になります。

プロパティ	意味
lineWidth	線の幅を指定
lineCap	線の端のスタイルを指定します
lineJoin	線と線が交わる部分のスタイルを指定
miterLimit	2本の線が鋭角に接合する際の太さを制御します
getLineDash()	破線のパターンを返します
setLineDash()	破線のパターンを指定します
lineDashOffset	破線の最初の位置を指定します

lineWidth / lineCap

const canvas14 = document.getElementById('sample14');
const cont14 = canvas14.getContext('2d');

cont14.lineWidth = 10;
cont14.beginPath();
cont14.moveTo(10, 10);
cont14.lineTo(10, 100);
cont14.stroke();

let lineCap = ['butt', 'round', 'square'];

for (let i = 0; i < lineCap.length; i++) {
  cont14.lineCap = lineCap[i];
  cont14.beginPath();
  cont14.moveTo(50 + i * 30, 10);
  cont14.lineTo(50 + i * 30, 100);
  cont14.stroke();
}

lineWidth で指定したラインの幅は次の線に引き継がれます。

linCapは以下の3つの値があります。

butt；両端は四角
round：両端は丸
square：両端は線の太さの半分の高さで四角

lineJoin

const canvas15 = document.getElementById('sample15');
const cont15 = canvas15.getContext('2d');

let lineJoin = ['round', 'bevel', 'miter'];
cont15.lineWidth = 10;

cont15.beginPath();
cont15.moveTo(-5, 5);
cont15.lineTo(35, 45);
cont15.lineTo(75, 5);
cont15.lineTo(115, 45);
cont15.lineTo(155, 5);
cont15.stroke();

for (let i = 0; i < lineJoin.length; i++) {
  cont15.lineJoin = lineJoin[i];

  cont15.beginPath();
  cont15.moveTo(170, 5 + i * 40);
  cont15.lineTo(205, 45 + i * 40);
  cont15.lineTo(245, 5 + i * 40);
  cont15.lineTo(285, 45 + i * 40);
  cont15.lineTo(325, 5 + i * 40);
  cont15.stroke();
}

lineJoinには、3つの値があります。

round：角を丸くします。
bevel：角を平らにします。
miter：角を尖らせます。

一番最初のラインはデフォルトの状態です。

setLineDash

const canvas16 = document.getElementById('sample16');
const cont16 = canvas16.getContext('2d');

cont16.lineWidth = 10;
cont16.beginPath();
cont16.setLineDash([5, 15]);
cont16.moveTo(5, 20);
cont16.lineTo(200, 20);
cont16.stroke();

「[]」の中の数値を変えると、破線の間隔が変わります。

グラデーション

createLinearGradient()：x1,y1からx2,y2までの位置でグラーデーションを作成します。
createRadialGradient()：x1,y1の半径をr1、x2,y2の半径をr2でグラーデーションを作成します。
createConicGradient()：扇形のグラーデーションを作成します。

これらのメソッドでオブジェクトを作成したら、addColorStop()メソッドで色を割り当てます。

addColorStop(offset, color);

offsetは0から１の間で設定します。

createLinearGradient()

const canvas17 = document.getElementById('sample17');
const cont17 = canvas17.getContext('2d');

let gradient = cont17.createLinearGradient(20, 20, 220, 20);

gradient.addColorStop(0, 'red');
gradient.addColorStop(0.5, 'blue');
gradient.addColorStop(1, 'green');

cont17.fillStyle = gradient;
cont17.fillRect(20, 20, 220, 150);

createRadialGradient()

const canvas18 = document.getElementById('sample18');
const cont18 = canvas18.getContext('2d');

let gradient1 = cont18.createRadialGradient(110, 110, 30, 100, 100, 70);

gradient1.addColorStop(0, 'red');
gradient1.addColorStop(0.5, 'white');
gradient1.addColorStop(1, 'blue');

cont18.fillStyle = gradient1;
cont18.fillRect(20, 20, 160, 160);

createConicGradient()

const canvas19 = document.getElementById('sample19');
const cont19 = canvas19.getContext('2d');

let gradient2 = cont19.createConicGradient(0, 100, 100);

gradient2.addColorStop(0, 'red');
gradient2.addColorStop(0.25, 'green');
gradient2.addColorStop(0.5, 'white');
gradient2.addColorStop(0.75, 'yellow');
gradient2.addColorStop(1, 'blue');

cont19.fillStyle = gradient2;
cont19.fillRect(20, 20, 200, 200);

パターン

createPattern(image, repetition)

createPatternは画像を繰り返します。

repetitionの値は以下になります。

repeat：両方向
repeat-x：水平のみ
repeat-y：垂直のみ
no-repeat：1度だけ（どちらの方向でもない）

元の画像です。

const canvas20 = document.getElementById('sample20');
const cont20 = canvas20.getContext('2d');

let img = new Image();
img.src = 'https://hitoridemanabou.net/wp-content/uploads/2022/06/clickicon-1.png';

img.onload = function () {
  const patt = cont20.createPattern(img, 'repeat');
  cont20.fillStyle = patt;
  cont20.fillRect(10, 10, 300, 300);
};

「onload」を使って、事前に画像を読み込ませます。

影

影を付けるには4つのプロパティが使用できます。

shadowOffsetX：水平距離
shadowOffsetY：垂直距離
shadowBlur：ぼかし
shadowColor：カラー

shadowOffsetX

const canvas21 = document.getElementById('sample21');
const cont21 = canvas21.getContext('2d');

cont21.shadowColor = 'red';
cont21.shadowOffsetX = 20;
cont21.shadowBlur = 10;

cont21.fillStyle = 'green';
cont21.fillRect(10, 10, 200, 150);

shadowOffsetY

const canvas22 = document.getElementById('sample22');
const cont22 = canvas22.getContext('2d');

cont22.shadowColor = 'red';
cont22.shadowOffsetY = 20;
cont22.shadowBlur = 10;

cont22.fillStyle = 'green';
cont22.fillRect(10, 10, 200, 150);