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

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();

    }

블로그 이미지

마즈다

이제 반백이 되었지만 아직도 꿈을 좇고 있습니다. 그래서 그 꿈에 다가가기 위한 단편들을 하나 둘 씩 모아가고 있지요. 이 곳에 그 단편들이 모일 겁니다...^^