Canvas 입문 - 원 그리기 편

12994 단어 캔버스자바스크립트

그리기 절차



이번에는 원을 그려보고 싶습니다.

①HTML,JS를 준비



기본적으로는 Canvas 입문 - 선·직사각형 묘화편 에서 사용한 것과 같은 것을 사용합니다.
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
</head>
<body>
  <canvas id="canvas"></canvas>

  <script>
    const canvas = document.getElementById('canvas'); // canvas要素への参照の取得
    const ctx = canvas.getContext('2d'); // コンテキストの取得
  </script>
</body>
</html>

②묘화용 메소드의 추기



원을 그리는 방법은 다음과 같습니다.
어디까지나 궤적이므로, 이 후에 fill()로 채우거나 stroke()로 선을 그립니다.
arc(x, y, radius, startAngle, endAngle, anticlockwise);


인수
내용


x
원의 중심점의 x 좌표

y
원의 중심점의 y 좌표

radius
반경

startAngle
원의 시작 각도

endAngle
원의 끝 각도

anticlockwise(true or false)
true로 시계 방향, false로 반시계 방향


아래와 같은 문서에 상세가 실려 있으므로, 함께 확인해 주세요.
> arc() 메서드

※각도에 대해서, 1주는 2π, 반원은 π입니다.

예 1) 원 그리기



JS의 내용을 발췌합니다.

    const canvas = document.getElementById('canvas'); // canvas要素への参照の取得
    const ctx = canvas.getContext('2d'); // コンテキストの取得

    /* コンテキスト設定 */
    ctx.strokeStyle = '#333'; // 塗りつぶしは暗めの色
    ctx.fillStyle = '#f00'; // 線は赤色
    ctx.lineWidth = 5; // 線の幅は5px

    /* 円の描画 */
    ctx.beginPath(); // パスの初期化
    ctx.arc(100, 50, 30, 0, 2 * Math.PI); // (100, 50)の位置に半径30pxの円
    ctx.closePath(); // パスを閉じる
    ctx.fill(); // 軌跡の範囲を塗りつぶす



예 2) 부채꼴 그리기



단순히 arc의 종료 각도를 아래와 같이 변경하면
    ctx.arc(100, 50, 30, 0, Math.PI / 6); // (100, 50)の位置に半径30pxの円、終了角度は「π = Math.PI（180度の半円)」

↓와 같은 잘 모르는 그림이 출력됩니다.



선형으로 그릴 때는 시작점을 그릴 필요가 있으므로 다음과 같이 "moveTo 메서드"에서 원의 중심을 지정합니다.
    const canvas = document.getElementById('canvas'); // canvas要素への参照の取得
    const ctx = canvas.getContext('2d'); // コンテキストの取得

        /* コンテキスト設定 */
    ctx.strokeStyle = '#333'; // 塗りつぶしは暗めの色
    ctx.fillStyle = '#f00'; // 線は赤色
    ctx.lineWidth = 5; // 線の幅は5px

        /* 円の描画 */
    ctx.beginPath(); // パスの初期化
    ctx.moveTo(100, 50); // 円の中心に筆をおろす
    ctx.arc(100, 50, 30, 0, Math.PI / 6); // (100, 50)の位置に半径30pxの円
    ctx.closePath(); // パスを閉じる
    ctx.fill(); // 軌跡の範囲を塗りつぶす

그러면 ↓과 같이 부채형이 출력되었습니다.


예 3) 부채꼴, 반시계 방향 그리기



시작 각도와 종료 각도는 동일하지만 반시계 방향으로 인해 그림의 모양이 "예 2"의 반전된 상태가 됩니다.

    const canvas = document.getElementById('canvas'); // canvas要素への参照の取得
    const ctx = canvas.getContext('2d'); // コンテキストの取得

        /* コンテキスト設定 */
    ctx.strokeStyle = '#333'; // 塗りつぶしは暗めの色
    ctx.fillStyle = '#f00'; // 線は赤色
    ctx.lineWidth = 5; // 線の幅は5px

        /* 円の描画 */
    ctx.beginPath(); // パスの初期化
    ctx.moveTo(100, 50); // 円の中心に筆をおろす
    ctx.arc(100, 50, 30, 0, Math.PI / 6, true); // (100, 50)の位置に半径30pxの円
    ctx.closePath(); // パスを閉じる
    ctx.fill(); // 軌跡の範囲を塗りつぶす

HTML5의 Canvas에 도트 그림 그리기
HTML Canvas로 bokeh 펜 도구 px-brush를 만들었습니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage