버튼으로 캔버스에 사각형을 그리는 방법

사각형을 그리는 방법을 알고 있지만 "사각형 그리기"버튼을 클릭 할 때만 그리는 방법은 있을까요? 또한, 버튼 (<p><button onclick="rect();">Rectangle</button></p>)을 만들지 만 어떻게 자바 스크립트에 연결합니까? 어떤 도움을 전혀 많이 ... 주시면 감사하겠습니다버튼으로 캔버스에 사각형을 그리는 방법

HTML5 :

<canvas id="canvas" width="500" height="500"></canvas>

JAVASCRIPT :

<script type="text/javascript"> 
var canvas = document.getElementById('canvas'), 
    ctx = canvas.getContext('2d'), 
    rect = {}, 
    drag = false; 


    function init() { 
    canvas.addEventListener('mousedown', mouseDown, false); 
    canvas.addEventListener('mouseup', mouseUp, false); 
    canvas.addEventListener('mousemove', mouseMove, false); 
} 


function mouseDown(e) { 
    rect.startX = e.pageX - this.offsetLeft; 
    rect.startY = e.pageY - this.offsetTop; 
    drag = true; 
} 


function mouseUp() { 
    drag = false; 
} 


function mouseMove(e) { 
    if (drag) { 
    rect.w = (e.pageX - this.offsetLeft) - rect.startX; 
    rect.h = (e.pageY - this.offsetTop) - rect.startY ; 
    ctx.clearRect(0,0,canvas.width,canvas.height); 
    draw(); 
    } 
} 


function draw() { 
    ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h); 
} 


init(); 
</script>

출처

2012-06-03 Wardenclyffe

글쎄, 당신은 실제로 이미 연결 한 당신 버튼을 'onclick'속성을 지정하여 자바 스크립트 함수에 추가합니다.

이제 직사각형을 그리는 js에 rect() 함수를 추가하면됩니다.

출처

2012-06-03 22:23:55 YemSalat

제발 ... 저에게 그걸 어떻게 보여줄 수 있습니까? :) 그냥 추가합니까 ......... function rect() {** code ** **} 그게 내가 한 일이고 여전히 작동하지 않습니다. ( – Wardenclyffe

좋아요! 저는 rect() 함수를 만들었습니다. 당신은 말했고 지금 버튼을 클릭하여 직사각형을 그릴 수 있습니다 :) 불행히도, 여전히 문제가 있습니다. 새로운 사각형을 만들기 위해 캔버스를 클릭 할 때마다 (또는 다른 것을하기 위해), 오래된 사각형이 사라집니다. 내 iPod에서 사용하려고했을 때도 작동하지 않았습니다 ... 왜? – Wardenclyffe

버튼으로 캔버스에 사각형을 그리는 방법

답변

관련 문제