JS 초보자가 실제로 코드를 써 가는데 얽혀 버려, 무위로 몇 시간을 보내 버린 슬픈 과거를 낭비하지 않기 위해 여러가지 써 가려고 생각합니다.

설정한 색이 반영되지 않는다 (전혀 관계없는 곳에 색이 붙어 버린다)

예를 들면

            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext('2d');

            function ballView(){
            ctx.beginPath();
            ctx.fillStyle =  'rgba(255,255,0,1)';
            ctx.arc(bx,by,10,0,2*Math.PI,true);
            ctx.fill();
        }

이런 코드
여러분은 어떤 의미인지 알 수 있습니까?
조금 조사하면 원을 그릴 뿐의 함수를 정의하고 있는 코드라고 알 수 있습니다만,
이렇게 되면 어떨까요?

            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext('2d');

            function ballView(){
            ctx.beginPath();
            ctx.arc(bx,by,10,0,2*Math.PI,true);
            ctx.fillStyle =  'rgba(255,255,0,1)';
            ctx.fill();
        }

어디가 바뀌었는지 깨닫습니까?
설명된 내용에는 큰 변화가 없습니다. 바뀐 것은 설명 순서입니다.
이렇게 써도 원은 표시됩니다.
그래서 겉보기 설명은 옳은 것 같습니다. 그러나 한 줄 한 줄 의미를 풀어 가면 실수를 깨닫습니다.

            ctx.arc(bx,by,10,0,2*Math.PI,true);

이 설명으로 원을 쓴 후

            ctx.fillStyle =  'rgba(255,255,0,1)';

이 설명에서 색상을 지정해도 기본 적용되지 않습니다.
벌써 이미 써 버린 후이기 때문입니다.

캔버스는 애니메이션 등에서 자주 사용되기 때문에 다양한 색상을 정의하는 경우도 많다고 생각합니다. 그런 때, 생각했던 대로의 색이 적용되지 않을 때는 기술의 순서에도 주의해 보세요.

clearRect가 반영되지 않음

캔버스로 애니메이션을 움직이고 싶을 때 다음과 같이 쓰는 일이 있을까 생각합니다.

        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext('2d');

        ctx.fillStyle="#329AE0";
        var y = 10;
        function loop() {
        ctx.clearRect(0,0,canvas.width,canvas.height);
        y++;
        ctx.arc(200,y,20,0,Math.PI*2,true);
        ctx.fill();
        setTimeout(loop,10);
        }           
        loop();

둥근 원의 묘화를 위에서 아래로 이동시키는 코드입니다만, 이것을 실제로 움직여 보면・・・

세로로 그림 두꺼운 선이 그려진다



이것은 알기 쉽도록 ctx.stroke();로 쓰여진 것입니다만, ctx.fill();로 쓰면 그림 굵은 선이 그려집니다.

그건 그렇고, 어떻게 해결할 것인가?

    function loop() {
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.beginPath();//これが必要！！！!!!
        y++;
        ctx.arc(200,y,20,0,Math.PI*2,true);
        ctx.stroke();

    setTimeout(loop,10);
    }           
      loop();

초초적인 일일지도 모르지만, 이것으로 몇 시간 고민했습니다 ...

...하지만, 내가 현재 프로그래밍을 공부중인 모 아카데미에서 다음 과제가 그림 응용 프로그램이었습니다. 그래서, 생각하지 않는 버그로 다음 과제를 공부하게되었습니다 (@ 0 @)

버그도 좀처럼 모욕되지 않습니다.

프로그램은 정직합니다. 기술한대로 반드시 움직인다. 그러나 인간처럼 헤아려 동작해 주는 일은 없습니다.

그렇기 때문에 성가시기도 합니다만, 그렇기 때문에 재미있기도 하고, 최근 생각할 수 있게 되어 왔을까, 라고 생각합니다.

여러분도 좋은 프로그래밍 라이프를! !