[HTML5] Canvas에 라인 그리기

새로 만드는 앱에 바이오리듬을 좀 출력해보고자 자바스크립트로 된 바이오리듬 소스를 구했다.

HTML5의  canvas element에 바이오리듬을 출력하는 소스였다.

모두 정상적으로 작동을 했는데...기준선과 각각의 바이오리듬 곡선이 별도의 색상으로 지정되어있는데도

불구하고 가장 마지막에 지정한 색상으로 모든 라인들이 표시되는 것이다.

한참을 찾다가 대체로 예제들에 보니 선이나 도형을 그릴 때 context.beginPath()로 시작하고

context.closePath()로 끝내는 것이 보이길래 앞 뒤로 이 함수들을 호출했더니 그제야 각각의

색상이 정상적으로 표시 되었다.

앞으로 도형을 그릴 때는 꼭 context.beginPath()로 시작하고 context.closePath()로 끝내자...

예제

for(k = 0; k < MAX_TYPE; k++)

    {

        var data = getBioData(k);

        context.strokeStyle = bio_info[k][1];

        context.beginPath();

        for(i = 0; i <= 30; i++)

        {

            context.moveTo(i * 6, (100 - data[i])/2 + 10);

            context.lineTo((i + 1) * 6, (100 - data[i+1])/2 + 10);

        

            context.stroke();

        }

        context.closePath();

    }