Canvas4 [자바스크립트] 캔버스(canvas) 화면 캡처/녹화 방법(+파일 저장 다운로드 구현) 자바스크립트는 태그의 화면을 캡처/녹화하는 방법을 제공한다. 예를 들어 캔버스에서 동작 중인 애니메이션을 녹화하여 동영상 등으로 저장할 수 있다. 작업 순서는 아래와 같다. # canvas 태그 화면 캡처/녹화 방법 1. canvas태그 화면 스트림 취득 : HTMLCanvasElement.captureStream()=>MediaStream 2. 취득한 스트림을 저장 : MediaRecorder, Blob 3. 저장한 스트림을 재생 OR 동영상 파일로 저장(다운로드) : BlobURL(ObjectURL) 먼저 canvas화면을 캡처하는 예제 코드 전문을 보고, 상세 설명을 정리한다. # canvas 캡처/녹화 방법 - 코드 전문 - 태그의 화면을 녹화하여 태그에서 재생하고, 동영상 파일로 다운로드 받는다.. 2021. 12. 12. HTML Canvas(캔버스) 선 그리기 방법 총정리: 7가지 샘플 예제 코드 # HTML Canvas 선 그리기 방법 1. 새로운 선 그리기 설정: ctx.beginPath() 2. 선의 출발점 지정 : ctx.moveTo(x, y) 3. 선의 도착점 지정 : ctx.lineTo(x, y) 4. 선 그리기 : ctx.stoke() * 여러개의 선을 그릴 때는 매번 beginPath() 호출 필요 * beginPath()를 호출하지 않으면, 도착점들을 계속 잇는 선이 그려진다. # 선 디자인 설정 방법 1. 선 디자인 설정 1) 색상 설정: ctx.strokeStyle = '색상'; 2) 두께 설정: ctx.lineWidth = 숫자; * 선 색상/두께는 그리기(ctx.stoke()) 전에 설정 2. 선 끝부분 설정: ctx.lineCap = "butt/square/round" 1.. 2021. 6. 1. HTML Canvas(캔버스) 기초: 기본 사용 방법 & 샘플 예제 코드 # HTML Canvas란? 1. canvas는 html문서 내부에 그림을 그릴 수 있는 일종의 '컨테이너' 엘리먼트다. 2. 자바스크립트를 통해 그림을 그리고 애니메이션과 이벤트 처리 등을 구현할 수 있다. # canvas 사용 방법 1. html 문서에 canvas 엘리먼트를 선언한다. 2. canvas 엘리먼트에 id 속성을 설정한다. 3. canvas 태그 내부에 width, height를 설정한다. 4. canvas 내장 '그리기 객체'를 취득한다. 5. 그리기 객체에 '채우기색, 선색, 그림자, 그라데이션' 등을 설정한다. 6. 그리기 객체를 통해 선, 사각형, 원, 텍스트 등을 그린다. 7. 자바스크립트를 통해 다양한 효과를 구현한다. # canvas 기초 샘플 코드 캔버스 태그를 생성하고,.. 2021. 6. 1. HTML Canvas 왜곡현상(선 두께 불일치, 비대칭, 비율 불균형 등) 해결 방법 HTML에서는 아래와 같이 canvas태그를 이용하면, 쉽게 그림을 그릴 수 있다. 오른쪽으로 갔다가 아래로 내려가는 선을 그리는 코드다. (나름대로 상세하게 주석을 달았다) 그런데 웹페이지에 띄워보면... 가로 세로 선 두께가 다른 것을 알 수 있다. 아주 기초적인 내용이지만, 모르고 있으면 난감한 내용이다. 이 현상은 그래픽적인 요소를 CSS로 별도 처리하는 좋은(?) 습관으로 인해 발생하는 문제다. (내가 그랬다.... ㅋㅋㅋ) MDN사이트 canvas 튜토리얼을 보면 이런 문장이 있다. Note: If your renderings seem distorted, try specifying your width and height attributes explicitly in the attributes, .. 2021. 3. 28. 이전 1 다음
