윈도우에 그림 그리기 프로그램과 같은 HTML5 캔버스가있는 사각형 그리기

Question

캔버스가있는 그림 응용 프로그램을 HTML5에 작성하고 있습니다. 감동과 그림으로 필자의 연필 그림을 완성했습니다. 이제 직사각형을 만들려고합니다. 내가 읽은 모든 주제에 대해 배열의 완성 된 도형을 모두 저장해야하지만, 그렇게하면 일반 그리기와 함께 모든 점을 저장해야하므로 창과 같은 사각형을 그릴 수 있습니다. 그림. 윈도우와 같은 직사각형을 그리는 또 다른 솔루션을 제공하십시오. 이전 사각형이 사라지고 새로운 마우스가 "마우스 업"을하기 전에 바뀝니다. 미리 감사드립니다.

Answer 1

이전 그림을 저장하거나 2 개의 캔버스를 사용해야합니다. mousedown에서

이전 도면을 저장하려면 ...

:

• 저장 마우스 위치 (STARTX/startY).
  • isDown == 거짓, 아무것도하지 않는다 (창)의 경우
  • 그렇지
  • 은 드래그 MouseMove 이벤트에서

  (isDown = true)가 시작되었음을 나타내는 플래그를 설정합니다 , 캔버스를 지우십시오

• 저장된 포인트 배열 등에서 모든 이전 도면을 다시 그립니다.
• 시작 부분부터 마우스 위치까지 현재 rect를 그립니다. - context.strokeRect (startX, st ARTY, mouseX - STARTX, 쥐의-startY)와 mouseUp에서

:

• 명확한 드래그 플래그 (isDown = false)를

당신이 캔버스를 사용하려면 ..

이전의 모든 그림을 저장하는 대신 2 개의 캔버스를 사용할 수 있습니다. 하나의 캔버스가 현재 사각형을 그리고 두 번째 캔버스가 이전의 모든 그리기 아이템을 유지하는 데 사용됩니다. 다음은 2 개의 캔버스를 사용하여 이전 도면을 저장할 필요가없는 예제입니다. jsfiddle.net/m1erickson/V9J5J/