아까 이미 글을 올렸습니다. 두인의 "지연 픽셀 그리드"를 실현하겠다는 아이디어가
오늘 돌아옵니다. 최근 두인 "블루 라인 챌린지"에서 사용하는 소품 수가 증가했습니다. 헤어 라인은 무엇입니까? 이펙트. 구부러진 눈썹 등. 약간 흥미 롭습니다. 생각하고 나서 프런트 엔드도 구현해야합니다. 오늘의 기사를 정리하겠습니다.
프로젝트 브레인 스토밍
- 비디오 캡처
- 비디오 해상도에 따라 그리기 영역을 설정하고 균일하게 유지하십시오.
- 시간이 지남에 따라 비디오의 지정된 영역을 그립니다.
- 사진의 일부, 비디오의 일부
- 보 조선 추가
- 전체 도면 끝
여기서는 그림의 위치가 그려지고 좌표 영역은 두 번째로 그려지지 않습니다.
수집 영역과 그리기 영역은 같고 비디오 크기와 캔버스 크기는 같습니다.
첫 번째 : 비디오 위치 캡처 (0,0, w = videowidth, h = 1) 및 그림 위치 (0,0, w = videowidth, h = 1) 그리기,
두 번째 : 비디오 위치 캡처 (0,1), w = videowidth, h = 1) 그림의 위치 (0,1, w = videowidth, h = 1)에 그려지고,
두 번째 : 비디오 위치가 캡처됩니다 (0,2, w = videowidth, h = 1) 그림의 위치 (0,2, w = videowidth, h = 1),
…
각 그림이 끝나면 하단 선 위치에 보 조선을 그려 사용자에게 그릴 위치를 알려줍니다.
마지막으로 경험 주소와 모든 코드를 붙여 넣습니다.
https://ibeeger.com/record/canvas.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>抖音蓝线挑战</title>
<style>
*{
margin: 0; padding: 0;}
body,html{
overflow: hidden}
section{
display: flex;
width: 100%;
height: 100%;
flex-direction: row;
}
video{
width:50%; background-color: #eee}
canvas{
width: 50%;
}
</style>
</head>
<body>
<section>
<canvas></canvas>
<video id='vd'></video>
</section>
<script>
(function(){
var cs = document.querySelector('canvas')
var ctx = cs.getContext('2d')
var vd = document.getElementById('vd')
var req;
var heightstep = 0;
cs.width = window.innerWidth/2
cs.height = window.innerHeight
async function start(){
let constraints = {
video:true}
let stream = await navigator.mediaDevices.getUserMedia(constraints)
vd.srcObject = stream
vd.addEventListener('loadeddata', function(){
vd.play();
cs.width = vd.videoWidth;
cs.height = vd.videoHeight;
draw()
})
}
function draw(){
if(heightstep >= cs.height-1){
cancelAnimationFrame(req);
return;
}
heightstep++;
let _h = heightstep % vd.videoHeight;
ctx.drawImage(vd,0,_h,vd.videoWidth,_h+1, 0, _h, cs.width, _h+1);
ctx.drawImage(vd,0,_h+1, vd.videoWidth, vd.videoHeight, 0, _h+1, cs.width, cs.height);
ctx.strokeStyle ="#0c0"
ctx.beginPath()
ctx.moveTo(0,_h+2)
ctx.lineTo(cs.width, _h+2);
ctx.closePath();
ctx.stroke();
req = requestAnimationFrame(draw)
}
start();
})()
</script>
</body>
</html>