Canvas 곡선 그리기 1

 

곡선 그리기

1. Grid 그리기

  // 그리드 정보
  const gridCount = 9;
  const gridArea = {x:50, y:30, h:350, w:400};

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

  // 그리드 그리기
  ctx.fillStyle = "#CCC"
  const gap = 50;
  for(let i = 0 ; i<gridCount ; i++) {
    ctx.fillRect(gridArea.x, gridArea.y+(gap*i), gridArea.w, 1);
    ctx.fillRect(gridArea.x+(gap*i), gridArea.y, 1, gridArea.h);
  }

 

2. 포인트 라인 그리기

  // 위치 정보
  const position = [{x:1,y:6},{x:3,y:3},{x:5,y:5}, {x:7,y:1}]
  
  const count = position.length;
  const point = [];
  for(let i = 0 ; i<count ; i++) {
    const y = gridArea.y + (gap*position[i].y);
    const x = gridArea.x + (gap*position[i].x);
    point.push({x,y})
  }

  // 라인 그리기
  ctx.lineWidth = 1.5;
  ctx.beginPath();
  for(let i = 0 ; i<count ; i++) {
    ctx.lineTo(point[i].x , point[i].y);
  }
  ctx.stroke();
  ctx.closePath();

  // 포인트 표시
  const radius = 2;
  for(let i = 0 ; i<count ; i++) {
    ctx.beginPath();
    ctx.arc(point[i].x, point[i].y, radius, 0, 2 * Math.PI);
    ctx.fill();
    ctx.stroke();
    ctx.closePath();
  }

3. Curve 포인트 구하기

  const point1 = [];  // 녹색점 
  const point2 = [];  // 빨간점
  const dist = 30;

  for(let i = 0 ; i<count ; i++) {
    point1.push({x:point[i].x-dist, y:point[i].y});
    point2.push({x:point[i].x+dist, y:point[i].y});
  }

  ctx.strokeStyle = "#00c50d"
  for(let i = 0 ; i<point1.length ; i++) {
    ctx.beginPath();
    ctx.arc(point1[i].x, point1[i].y, radius, 0, 2 * Math.PI);
    ctx.fill();
    ctx.stroke();
    ctx.closePath();
  }

  ctx.strokeStyle = "#c50d00"
  for(let i = 0 ; i<point2.length ; i++) {
    ctx.beginPath();
    ctx.arc(point2[i].x, point2[i].y, radius, 0, 2 * Math.PI);
    ctx.fill();
    ctx.stroke();
    ctx.closePath();
  }

4. 곡선 그리기

  ctx.strokeStyle = '#F00';
  ctx.lineWidth = 3;
  ctx.beginPath();
  ctx.moveTo(point[0].x, point[0].y);
  for(let i = 1 ; i<count ; i++) {
    ctx.bezierCurveTo(point2[i-1].x, point2[i-1].y,point1[i].x, point1[i].y ,point[i].x, point[i].y)
  }

  ctx.stroke();
  ctx.closePath();

 

5. 문제

다른 Point 했을시 문제

다른 point 적용시 위 이미지와 같이 이상하게 그려진다.

이부분 해결은. 다음 곡선그리기2 에서..