캔버스 drawImage()에 넣을수 있는 인자들
- 이미지
- 비디오
- 캔버스
비디오 태그
비디오 태그 속성 autoplay: 자동재생 muted: 음소거 loop: 자동반복
전용 이벤트리스너 'canplaythroug' : 재생할 수 있을때 실행
크롬은 소리 있는 영상은 자동재생을 못하게 되어있음
<style> canvas {background: #eee;} /* 캔버스의 비디오는 결국 비디오태그를 가져다 쓰는것이다. 이걸 display:none하면 캔버스의 비디오도 멈춘다 */ video {position: absolute; width: 0; height: 0; } </style> <body> <h1>Video</h1> <video class="video" src="../images/video.mp4" autoplay muted loop></video> <canvas class="canvas" width="600" height="400">이 브라우저는 캔버스를 지원하지 않습니다.</canvas> <script> const canvas = document.querySelector('.canvas'); const ctx = canvas.getContext('2d'); let canPlayState = false; ctx.textAlign = 'center'; ctx.fillText('비디오 로딩 중..', 300, 200); const videoElem = document.querySelector('.video'); videoElem.addEventListener('canplaythrough', render); function render() { ctx.drawImage(videoElem, 0, 0, 600, 400); requestAnimationFrame(render); } </script>
비디오 객체와 폰트
- 글씨를 렌더링 하는 메서드: fillText(글씨, x, y)
- 비디오 Dom객체의 currentTime 속성 : 현재 재생 시간
const canvas = document.querySelector('.canvas');
const ctx = canvas.getContext('2d');
ctx.font = 'bold 50px serif';
ctx.fillStyle = 'white';
const videoElem = document.querySelector('.video');
videoElem.addEventListener('canplaythrough', render);
const messages = [
{time: 1, message: '1 ㅋㅋ', x: 100, y: 100},
{time: 3, message: '2 ㅎㅎ', x: 300, y: 300},
{time: 5, message: '3 ㅊㅊ', x: 400, y: 200}
];
function render() {
ctx.drawImage(videoElem, 0, 0, 600, 400);
for (let i = 0; i < messages.length; i++) {
if (videoElem.currentTime > messages[i].time) {
ctx.fillText(messages[i].message, messages[i].x, messages[i].y);
}
}
requestAnimationFrame(render);
}비디오 객체가 가진 이미지 데이터
- ctx.getImageData()의 리턴값에 data속성을 보면 R,G,B,A값이 루프돌며 리턴
- 위의 리턴된 값을 이용해 비디오의 컬러 필터 적용 가능
- 0번 값을 255로 바꾸면 빨간색 1번 값을 255로 바꾸면 초록색 2번 값을 255로 바꾸면 파란색이 되는 원리
<video class="video" src="../images/video.mp4" autoplay muted loop></video>
<canvas class="canvas" width="600" height="400">이 브라우저는 캔버스를 지원하지 않습니다.</canvas>
<div class="btns">
<button class="btn" data-color='red'>R</button>
<button class="btn" data-color='green'>G</button>
<button class="btn" data-color='blue'>B</button>
<button class="btn" data-color=''>Reset</button>
</div>
<script>
const canvas = document.querySelector('.canvas');
const ctx = canvas.getContext('2d');
const videoElem = document.querySelector('.video');
videoElem.addEventListener('canplaythrough', render);
const btnsElem = document.querySelector('.btns');
let imageData, particle, colorValue, leng;
const particles = [];
function render() {
ctx.drawImage(videoElem, 0, 0, 600, 400);
imageData = ctx.getImageData(0, 0, 600, 400);
leng = imageData.data.length / 4;
for (let i = 0; i < leng; i++) {
switch(colorValue) {
case 'red':
imageData.data[i * 4 + 0] = 255;
break;
case 'green':
imageData.data[i * 4 + 1] = 255;
break;
case 'blue':
imageData.data[i * 4 + 2] = 255;
break;
}
}
ctx.putImageData(imageData, 0, 0);
requestAnimationFrame(render);
}
btnsElem.addEventListener('click', function (e) {
colorValue = e.target.getAttribute('data-color');
});https://www.youtube.com/watch?v=p8TsTUJj-kY&list=PLe9WXHRkq9p2Yl0z2zskv-FhP5sinISTc&index=3
'Ecmascript > Canvas' 카테고리의 다른 글
| [테트리스 만들기] 테트리스 기능 구현(다음 블록 생성, 한줄 채우면 사라지고 점수 증가) (0) | 2020.01.19 |
|---|---|
| [테트리스 만들기] 레이아웃부터 모션까지 제작 (0) | 2020.01.12 |
| 캔버스 #01 애니메이션 중지, 이미지 (0) | 2019.12.15 |
| 캔버스 #01 그리기와 애니메이션 원리 (0) | 2019.12.15 |
| 캔버스 기초 (0) | 2019.12.07 |
