순수 자바스크립트만으로 웹 칠판을 만들고 있는 중인데 질문이 있습니다.

Question

canvas 태그에 칠판 이미지를 백그라운드 이미지로 삽입해서저장할 때 백그라운드 이미지까지 그대로 저장하고 싶은데 자바스크립트만으로 하는 방법이 아무리 찾아도 안나옵니다 ㅠㅠ

콩콩시 · Answer

당연히 안됩니다..;;;;;하시려면 캔버스의 뒷 배경에 넣으셔야 합니다.그러므로 처음부터 아래처럼 기능을 구현하셔야 합니다.캔버스를 clear 한다.save 메서드를 통해 현재 상태를 저장한다.drawImage 함수를 통해 이미지를 그린다.사용자가 그림을 그리면 해당 내용을 그린다(moveTo, LineTo 및 베지어 등등)다 그리고 난 뒤 restore 한다.사용자의 이벤트(마우스 무브, 클릭 등)에 대해서 가장 먼저 하는 행동이 지우기(clear)&#43;이미지 그리기(drawImage) 가 먼저 되어야 합니다.이렇게 구조를 만드시고 난 뒤에 이미지출력(getImageData) 기능을 구현하시믄 됩니다.

컴포지트 · Answer

윗분 설명에 첨언하자면,평소에 배경 이미지는 CSS background-image 나 또다른 canvas 태그로 덧씌우는 방법이 있겠고,&#34;저장&#34;할 때 저장용 캔버스를 생성해서, 거기에 배경 이미지 그리고, 원래 캔버스에 그렸던 이미지 가져와서 복사한 다음 저장하는 방법이 있습니다.

순수 자바스크립트만으로 웹 칠판을 만들고 있는 중인데 질문이 있습니다.

2개의 답변

Q&A 목록