canvas – 円弧 – propansystem プロパンシステム

canvas – 円弧

円弧を試します。

コンテキストに対してのメソッドはarcを使います。

arc(x, y, radius, startAngle, endAngle, counterclockwise)

以下、簡単なサンプルです。

<!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.arc(50, 50, 40, 0, -1, true);

    // パスを線で描画する
    ctx.stroke();
</script>
</body>
</html>

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

画面にアクセスすると、1ラジアンの円弧の線が描画されます。

この時、arcメソッドの引数に注目すると、

arc(x, y, radius, startAngle, endAngle, counterclockwise)

各引数の定義は以下の意味になります。

x : 円の中心点x座標
y : 円の中心点y座標
radius : 半径
startAngle : 開始角度(ラジアン)
endAngle : 終了角度(ラジアン)
counterclockwise : 描画する方向(時計周り:false か反時計周り:true)

サンプルでは、

ctx.arc(50, 50, 40, 0, -1, true);

という記述なので、半径40の円弧を画面上の(50,50)の位置から、
描画する線は、0ラジアンから開始し、-1ラジアンまで、反時計回りで描画する。
という動きになります。

ラジアンについて

ラジアンは数学の分野で頻繁に使われます。
日常では度数(0～360)の数値のほうが馴染みがあります。
ラジアンの定義は、円の半径の長さを孤としたときの、円の中心角度が1ラジアン。とされています。
度数でいうと、1ラジアンは、57.29578度に相当します。

canvas – 円弧

ラジアンについて

コメントを残す