자바스크립트 랜덤 관련 질문입니다.

var canvas, ctx, button;
    window.onload = function() {
        button = document.getElementById("button");
        button.onclick = strokeCircle;
    }


    function strokeCircle() {
        a = Math.random();
        b = Math.random();
        x = (45 * a) + ((640 - (45 * a))*a);
        y = (45 * b) + ((400 - (45 * b))*b);
        if (a >= b) {
            z = (44 * b) + 1;
        } else {
            z =(44 * a) + 1;
        } 
       

        canvas = document.getElementById("mycanvas");
        ctx = canvas.getContext("2d");
        ctx.beginPath();
        ctx.arc(x, y, z, 0,2*Math.PI, false);
        ctx.stroke();  
    }

    
</script>
<p><input type="button" value="click" id="button"></p>

원하던 것은 원(1~45사이즈)이 캔버스를 벗어나지 않고 랜덤하게 그려지는 것입니다.

제가 머리가 나빠서 그런지 몇번을 시도해도 안되네요 ㅠㅠ

(지름 1의 원이라면 (1,1)에 위치 할 수 있어야 합니다.)

하시려는게 원 좌표를 바운딩 영역에서 벗어나지 않는만큼에서 랜덤하게 좌표이동 하는것이죠? 이대로 적어보면

원 반지름: r
원 좌표(초기값): (x, y) = (r, r)
바운딩 영역: (w, h) = ((캔버스 너비 - r), (캔버스 높이 - r))
랜덤 좌표: (rx, ry) = (rand(w), rand(h))

일 때 (원 좌표 + 랜덤 좌표) 이렇게 좌표이동 하시면 원하는 결과 얻으 실 수 있겠습니다.

2개의 좋아요

감사합니다. 자바스크립트 공부하며 물어 볼 곳이 없었는데 많은 도움이 되었습니다.