【抖音】定格传送带

周末快乐、各位；今天有刷抖音了，看到了抖音的【定格传送带】，又复习下动手实践了下，跟以前的多帧延迟思路差不多；

直接贴代码了

(function(){
			var cs = document.querySelector('canvas')
			var ctx = cs.getContext('2d')
			var vd = document.getElementById('vd')
			var req;
			var step = 4;
			var heightstep = 0;
			var offsetx = 0;
			var cols = []
			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;
					cols = new Array(vd.videoWidth/step)
					draw()
				})
				
			}


			function verline(){
				let startx = cs.width/2-step;
				cols.unshift({
					data: ctx.getImageData(startx, 0, step, cs.height)
				})
				if(cols.length>=vd.videoWidth/step){
					cols.pop()
				}
				document.querySelector('p').innerHTML = offsetx+'/'+cols.length
			}


		 	function draw(){
		 		ctx.drawImage(vd,0,0,vd.videoWidth,vd.videoHeight, 0, 0, cs.width, cs.height);
		 		verline()
		 		cols.forEach((item, index) => {
		 			if(item){
		 				ctx.putImageData(item['data'], cs.width/2+index*step,0);
		 			}
		 		})
		 		req = requestAnimationFrame(draw)

		 	}
			start();

		})()

体验地址：https://ibeeger.com/record/keyframe.html

周末HAPPY下~~~~~~~

标签：vd,传送带,width,cols,定格,var,step,抖音,cs
来源： https://blog.csdn.net/uk_51/article/details/117200373