HTML5 캔버스 색상 전환 및 선 두께

Question

기본적으로 나는이 있습니다) 결국 상자, 큰 X 및 직선도 배치 할 수있는 능력이 필요합니다.

편집 : 변경되지 않은 다른 색상이나 선 두께를 선택하면 도움이 필요합니다. 두께와 색상을보다 정확하게 뭔가 그 변수의 일부를 변경하려고 노력하지 않는 자

var DrawingCommands = {LINE_TO:  "lineTo", 
        MOVE_TO:  "moveTo", 
        SET_THICKNESS: "setThickness", 
        SET_COLOR:  "setColor"}; 

Answer 1

: 키 배열을 추가 할 때마다 모양 들어 :

/* Drawing on Paint App */ 
tmp_ctx.lineWidth = 5; 
tmp_ctx.lineJoin = 'round'; 
tmp_ctx.lineCap = 'round'; 
tmp_ctx.strokeStyle = '#0052CC'; 
tmp_ctx.fillStyle = '#0052CC'; 

을 그리고 다른 모양에 대해, 나는이 제안 값은 X 모양의 시작 및 끝 위치와 같습니다. onMouseDown 사용자가 첫 번째 위치를 저장하고 drawning 함수에 저장된 첫 번째 위치와 마우스 현재의 모양을 그리면 (onMouseDown이 모양을 어떻게 보일지) onMouseUp 마우스로 첫 번째 위치를 아래로 두 번째로 추가하고이 위치를 배열에 추가합니다 객체 그리기 (예 : ppts)

업데이트 - thcickness에 대한 자세한 설명 : 난 단지 두께를 논의하고 난 전체 코드를 읽고, 그래서 알고 있지만, 그것은 당신이 당신의 질문에 말을 기준으로 작동하지 않았다. 튜토리얼에서주의 깊게 작성한 코드를 연구하여 실제 상황에서 무엇이 중요한지 알아보십시오.

먼저 페이지 하단의 registerInputListeners이라는 함수를 찾을 수 있지만 어디에서도 호출되지 않습니다. 두께 선택 변경은 두께 선택 수신기localLineThickness이며 변경 될 수 있습니다. 코드 상단에서 초기화하십시오.

var localLineThickness = 5; 

이제 페인트하기 전에 lineWidth를 설정해야합니다. 당신은 mousedown 청취자에서 그것을 할 수 있습니다.

코드를 읽은 것만 큼 결국 다른 원격 사용자가 제어해야한다고 가정하므로 솔루션이 더 이상 적합하지 않습니다.