캔버스 배경 변경

Question

HTML5 캔버스 그리기 앱이 있는데 버튼을 클릭 할 때 배경색을 변경해야합니다.

캔버스의 배경색이 사용자 측에서 작동하지만 사용자가 이미지를 서버에 저장할 수 있으며 캔버스 데이터를 canvas.toDataURL ('image/png')을 사용하여 내보내고 있습니다. 문제는 캔버스의 배경색이 포함되어 있지 않으며, 사용자가 그린 데이터 만 보냅니다.

전체 캔버스에 커다란 재 협소를 두는 것에 대해 생각했지만, 이미 만들어진 모든 그림을 덮어 씁니다. 어떤 아이디어?

Answer 1

를 사용하여 최고

추출에 남아있는 그래픽을 그리기 예를 들어 fillRect()

를 사용하여 배경을 그립니다 배경을 이미 캔버스에 그려 넣은 후에는 같은 크기의 다른 캔버스를 "display : none"과 함께 추가 할 수 있습니다. n 이미지를 보내기 전에 임시 캔버스에 기본 캔버스 요소의 배경색을 채우고 주 캔버스를 임시 캔버스에 그립니다. 마지막으로 투명한 배경을 가진 주 캔버스의 비트 맵 대신 임시 캔버스에서 컴포지트를 서버로 보냅니다.

Answer 2

코드를 표시하지는 않지만 상황을 사용하여 배경을 그려야합니다. CSS를 사용하여 배경을 설정하면 이미 이미지를 추출 할 때 포함시키지 않은 것으로 나타납니다.

캔버스는 단순히 캔버스 요소과 그 비트 맵의 두 부분으로되어 있습니다. CSS를 사용하면 요소에는 영향을 미치지 만 비트 맵에는 영향을 미치지 않습니다. 그러므로 비트 맵의 ​​컨텍스트를 통해 비트 맵을 업데이트하거나 픽셀 버퍼를 사용하여 비트 맵의 ​​일부가되어야합니다.

다음을 수행하십시오

초기화에서

• 추가 할 경우 toDataURL()