canvas – グラフィック属性について – propansystem プロパンシステム

canvas – グラフィック属性について

あけましておめでとうございます。
本年もよろしくお願いいたします。

さて、canvasのグラフィック属性について試します。

canvasの図形描画はstrokeStyleプロパティ、fillStyleプロパティ等を設定すると色を定義する。
また、fill()メソッドやstoroke()メソッドは引数を渡さずに実行する。
グラフィックの状態(プロパティ)と描画命令(メソッド)が分離していることに注意する。

canvasのCanvasRenderingContext2Dオブジェクトについて、グラフィック属性(プロパティ)を調べてみます。

CanvasRenderingContext2DのオブジェクトのインスタンスプロパティをMDNから引用すると、以下のものがあります。

canvas
direction
fillStyle
filter
font
fontKerning
fontStretch
fontVariantCaps
globalAlpha
globalCompositeOperation
imageSmoothingEnabled
imageSmoothingQuality
letterSpacing
lineCap
lineDashOffset
lineJoin
lineWidth
miterLimit
shadowBlur
shadowColor
shadowOffsetX
shadowOffsetY
strokeStyle
textAlign
textBaseline
textRendering
wordSpacing

このうちグラフィック属性に関連するプロパティは以下になります。
(厳密にはfontは文字のフォント指定になりますが、グラフィックの一種とみなしています)

fillStyle
font
globalAlpha
globalCompositeOperation
lineCap
lineJoin
lineWidth
miterLimit
textAlign
textBaseline
shadowBlur
shadowColor
shadowOffsetX
shadowOffsetY
strokeStyle

それぞれ、どんな動きになるか試してみます。
これまでのサンプルと重複する記述になるプロパティもあります。

fillStyle

画面上の図形に色を描画します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    // canvasのDOMを取得
    const canvas = document.getElementById('canvas');

    // getContextメソッドでコンテキストを取得
    // ここでは2次元の平面的な図形を扱うので、引数に「2d」を指定
    const ctx = canvas.getContext('2d');

    // コンテキストのstyleを定義
    // パスの開始
    ctx.beginPath();

    // 長方形
    ctx.moveTo(10, 10);
    ctx.rect(30, 30, 100, 60);

    // 色を指定する
    ctx.fillStyle = "#339999";

    // 描画する
    ctx.fill();
</script>
</body>
</html>

サーバ上のHTMLはこちら(test1.html)

font

フォント属性を表示する際のフォントを指定します。
コンテキストを描画する際は「strokeTextメソッド」を使用しています。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    // canvasのDOMを取得
    const canvas = document.getElementById('canvas');

    // getContextメソッドでコンテキストを取得
    const ctx = canvas.getContext('2d');

    // フォント指定及びテキストの描画
    ctx.font = "24px Courier New";
    ctx.strokeText("Test123", 10, 20);
</script>
</body>
</html>

サーバ上のHTMLはこちら(test2.html)

globalAlpha

canvas全体の透明度を設定します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    // canvasのDOMを取得
    const canvas = document.getElementById('canvas');

    // getContextメソッドでコンテキストを取得
    // ここでは2次元の平面的な図形を扱うので、引数に「2d」を指定
    const ctx = canvas.getContext('2d');

    // 透明度の設定
    ctx.globalAlpha = 0.2;

    // コンテキストのstyleを定義
    // パスの開始
    ctx.beginPath();

    // 長方形
    ctx.moveTo(10, 10);
    ctx.rect(30, 30, 100, 60);

    // 色を指定する
    ctx.fillStyle = "#339999";

    // 描画する
    ctx.fill();
</script>
</body>
</html>

サーバ上のHTMLはこちら(test3.html)

globalCompositeOperation

複数の図形を重ねて描画する際、合成演算の種類を指定します。

種類は以下です。

source-over
source-in
source-out
source-atop
destination-over
destination-in
destination-out
destination-atop
lighter
copy
xor
multiply
screen
overlay
darken
lighten
color-dodge
color-burn
hard-light
soft-light
difference
exclusion
hue
saturation
color
luminosity

一例として「source-out」を試してみます。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    // canvasのDOMを取得
    const canvas = document.getElementById('canvas');

    // getContextメソッドでコンテキストを取得
    // ここでは2次元の平面的な図形を扱うので、引数に「2d」を指定
    const ctx = canvas.getContext('2d');

    // 透明度の設定
    ctx.globalCompositeOperation = "source-out";

    // コンテキストのstyleを定義
    // パスの開始
    ctx.beginPath();

    // 長方形①
    ctx.rect(30, 30, 100, 60);
    ctx.fillStyle = "#339999"; // 色を指定する

    // 描画する
    ctx.fill();

    // 長方形②
    ctx.rect(50, 50, 100, 60);
    ctx.fillStyle = "#885544"; // 色を指定する

    // 描画する
    ctx.fill();

</script>
</body>
</html>

サーバ上のHTMLはこちら(test4.html)

lineCap

描画した線の端の形状を指定します。

種類は以下です。

butt
round
square

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    // canvasのDOMを取得
    const canvas = document.getElementById('canvas');

    // getContextメソッドでコンテキストを取得
    // ここでは2次元の平面的な図形を扱うので、引数に「2d」を指定
    const ctx = canvas.getContext('2d');

    // 線(butt)
    ctx.beginPath();
    ctx.moveTo(10, 5);
    ctx.lineWidth = 12;
    ctx.lineCap   = "butt";
    ctx.lineTo(100, 5);
    ctx.stroke();

    // 線(round)
    ctx.beginPath();
    ctx.moveTo(10, 25);
    ctx.lineWidth = 12;
    ctx.lineCap   = "round";
    ctx.lineTo(100, 25);
    ctx.stroke();

    // 線(square)
    ctx.beginPath();
    ctx.moveTo(10, 45);
    ctx.lineWidth = 12;
    ctx.lineCap   = "square";
    ctx.lineTo(100, 45);
    ctx.stroke();

</script>
</body>
</html>

サーバ上のHTMLはこちら(test5.html)

lineJoin

描画した線の接続部分の形状を指定します。

種類は以下です。

round
bevel
miter

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<canvas id="canvas" width="500" height="400"></canvas>
<script>
    // canvasのDOMを取得
    const canvas = document.getElementById('canvas');

    // getContextメソッドでコンテキストを取得
    const ctx = canvas.getContext('2d');

    // 線分の接続(round)
    ctx.beginPath();
    ctx.moveTo(10, 10);
    ctx.lineWidth = 15;
    ctx.lineJoin  = "round";
    ctx.lineTo(50 , 60);
    ctx.lineTo(100, 10);
    ctx.stroke();

    // 線分の接続(bevel)
    ctx.beginPath();
    ctx.moveTo(10, 70);
    ctx.lineWidth = 15;
    ctx.lineJoin  = "bevel";
    ctx.lineTo(50 , 120);
    ctx.lineTo(100, 70);
    ctx.stroke();

    // 線分の接続(miter)
    ctx.beginPath();
    ctx.moveTo(10, 150);
    ctx.lineWidth = 15;
    ctx.lineJoin  = "miter";
    ctx.lineTo(50 , 200);
    ctx.lineTo(100, 150);
    ctx.stroke();

</script>
</body>
</html>

サーバ上のHTMLはこちら(test6.html)

lineWidth

描画した線の太さを指定します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<canvas id="canvas" width="500" height="400"></canvas>
<script>
    // canvasのDOMを取得
    const canvas = document.getElementById('canvas');

    // getContextメソッドでコンテキストを取得
    const ctx = canvas.getContext('2d');

    // 線分の接続(round)
    ctx.beginPath();
    ctx.moveTo(10, 10);
    ctx.lineWidth = 1;
    ctx.lineTo(50 , 60);
    ctx.lineTo(100, 10);
    ctx.stroke();

    // 線分の接続(bevel)
    ctx.beginPath();
    ctx.moveTo(10, 70);
    ctx.lineWidth = 5;
    ctx.lineTo(50 , 120);
    ctx.lineTo(100, 70);
    ctx.stroke();

    // 線分の接続(miter)
    ctx.beginPath();
    ctx.moveTo(10, 150);
    ctx.lineWidth = 10;
    ctx.lineTo(50 , 200);
    ctx.lineTo(100, 150);
    ctx.stroke();

</script>
</body>
</html>

サーバ上のHTMLはこちら(test7.html)

miterLimit

MDNから引用です。
miterLimitは「内側の接続点から外側の接続点をどれだけ遠くに配置できるかを決定」します。
以下のサンプルはあまり効果がわかりません。このプロパティについては別途投稿するかもしれません。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<canvas id="canvas" width="500" height="400"></canvas>
<script>
    // canvasのDOMを取得
    const canvas = document.getElementById('canvas');

    // getContextメソッドでコンテキストを取得
    const ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.moveTo(10, 10);
    ctx.lineWidth  = 10;
    ctx.miterLimit = 0.1;
    ctx.lineTo(50 , 60);
    ctx.lineTo(100, 10);
    ctx.stroke();

</script>
</body>
</html>

サーバ上のHTMLはこちら(test8.html)

textAlign

テキストを描画するメソッド「fillText」で使用。
left、center、rightを指定する。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<canvas id="canvas" width="500" height="400"></canvas>
<script>
    // canvasのDOMを取得
    const canvas = document.getElementById('canvas');

    // getContextメソッドでコンテキストを取得
    const ctx = canvas.getContext('2d');

    // ガイド線
    ctx.beginPath();
    ctx.lineWidth = 0.5;
    ctx.moveTo(100, 10);
    ctx.lineTo(100, 150);
    ctx.stroke();

    ctx.font = "14px Courier New";

    ctx.textAlign = "left";
    ctx.fillText("テスト①", 100, 40);

    ctx.textAlign = "center";
    ctx.fillText("テスト②", 100, 85);

    ctx.textAlign = "right";
    ctx.fillText("テスト③", 100, 130);

</script>
</body>
</html>

サーバ上のHTMLはこちら(test9.html)

textBaseline

テキストを描画する際のベースラインを設定する。

指定する値は下記

top
hanging
middle
alphabetic
ideographic
bottom

それぞれ、どの位置を基準線としてテキストを描画するかを決定します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script>
    // canvasのDOMを取得
    const canvas = document.getElementById('canvas');

    // getContextメソッドでコンテキストを取得
    const ctx = canvas.getContext('2d');

    // ガイド線
    ctx.beginPath();
    ctx.lineWidth = 0.5;
    ctx.moveTo(10, 40);
    ctx.lineTo(580, 40);
    ctx.stroke();

    ctx.font = "18px Courier New";

    // テキスト描画
    ctx.textBaseline = 'top';
    ctx.fillText("top", 10, 40);

    ctx.textBaseline = 'hanging';
    ctx.fillText("hanging", 60, 40);

    ctx.textBaseline = 'middle';
    ctx.fillText("middle", 150, 40);

    ctx.textBaseline = 'alphabetic';
    ctx.fillText("alphabetic", 230, 40);

    ctx.textBaseline = 'ideographic';
    ctx.fillText("ideographic", 360, 40);

    ctx.textBaseline = 'bottom';
    ctx.fillText("bottom", 500, 40);

</script>
</body>
</html>

サーバ上のHTMLはこちら(test10.html)

shadowBlur / shadowColor

図形をぼかします(影をつけます)。
shadowBlurは、ぼかしの度合を定義します。
shadowColorは、ぼかしの色を定義します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script>
    // canvasのDOMを取得
    const canvas = document.getElementById('canvas');

    // getContextメソッドでコンテキストを取得
    const ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.moveTo(10, 10);
    ctx.rect(30, 30, 100, 60);

    // 色を指定する
    ctx.fillStyle   = '#339999'; // 背景色
    
    // ぼかしの定義
	ctx.shadowBlur  = 15;        // ぼかし量
	ctx.shadowColor = '#115544'; // ぼかし色

    // 描画する
    ctx.fill();
</script>
</body>
</html>

サーバ上のHTMLはこちら(test11.html)

shadowOffsetX / shadowOffsetY

図形のぼかし(影)の位置を指定します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script>
    // canvasのDOMを取得
    const canvas = document.getElementById('canvas');

    // getContextメソッドでコンテキストを取得
    const ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.moveTo(10, 10);
    ctx.rect(30, 30, 100, 60);

    // 色を指定する
    ctx.fillStyle   = "#339999"; // 背景色
    
    // ぼかしの定義
	ctx.shadowBlur    = 15;        // ぼかし量
	ctx.shadowColor   = '#115544'; // ぼかし色
	ctx.shadowOffsetX = '10';      // ぼかし描画位置(X軸)
	ctx.shadowOffsetY = '20';      // ぼかし描画位置(Y軸)

    // 描画する
    ctx.fill();
</script>
</body>
</html>

サーバ上のHTMLはこちら(test12.html)

strokeStyle

図形の輪郭の色、グラデーション、パターンを指定します。

指定する値は下記

color
gradient
pattern

strokeStyle – color 指定の場合

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script>
    // canvasのDOMを取得
    const canvas = document.getElementById('canvas');

    // getContextメソッドでコンテキストを取得
    const ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.moveTo(10, 10);
    ctx.rect(30, 30, 100, 60);

    // 色を指定する
    ctx.fillStyle   = "#339999"; // 背景色
    
    // ぼかしの定義
	ctx.shadowBlur    = 15;        // ぼかし量
	ctx.shadowColor   = '#115544'; // ぼかし色
	ctx.shadowOffsetX = '10';      // ぼかし描画位置(X軸)
	ctx.shadowOffsetY = '20';      // ぼかし描画位置(Y軸)

    // 描画する
    ctx.fill();
</script>
</body>
</html>

サーバ上のHTMLはこちら(test13.html)

strokeStyle – gradient 指定の場合

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<canvas id="canvas" width="300" height="200"></canvas>
<script>
    // canvasのDOMを取得
    const canvas = document.getElementById('canvas');

    // getContextメソッドでコンテキストを取得
    const ctx = canvas.getContext('2d');
    
    const gradient = ctx.createLinearGradient(0, 0, 300, 200);
    
    // addColorStop()を使ってグラデーションの色を調整
    gradient.addColorStop(0, '#ff0000');
    gradient.addColorStop(1, '#0000ff');

    ctx.strokeStyle = gradient;
    ctx.lineWidth   = 3;
    ctx.strokeRect(5, 5, 290, 190);

</script>
</body>
</html>

サーバ上のHTMLはこちら(test14.html)

strokeStyle – pattern 指定の場合

patternの確認として、画像ファイルを準備してそれをjavascriptから読み込んでいます。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<canvas id="canvas" width="300" height="200"></canvas>
<script>
    // メインキャンバスのDOMを取得
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    
    // 画像の準備
    let img = new Image();
    img.src = 'https://propansystem.net/blogsample/js/194/sima_small.jpg';
    
    img.onload = function() {
        let pattern = ctx.createPattern(img, 'repeat');
        ctx.strokeStyle = pattern;      // パターンを線のスタイル
        ctx.lineWidth = 20;             // 枠線の太さ
        ctx.strokeRect(0, 0, 300, 200); // パターンの枠線
    }
</script>
</body>
</html>

サーバ上のHTMLはこちら(test15.html)