canvas渲染video视频

function drawCanvas() {
 if (videoElement.paused || videoElement.ended) {
 	return;
 }
 var canvas = $("#canvas");
 var _canvas = canvas.get(0);
 context = _canvas.getContext("2d");
 canvas.attr({
 	width: videoElement.videoWidth,
 	height: videoElement.videoHeight
 })
 
 context.clearRect(0, 0, videoElement.videoWidth, videoElement.videoHeight);
 context.fillStyle = 'red';
 context.fillStyle = 'rgba(255,255,0,0.5)';
 context.drawImage(videoElement, 0, 0, videoElement.videoWidth, videoElement.videoHeight, 0, 0, videoElement.videoWidth, videoElement.videoHeight);
 if (videoElement.videoWidth > 0 && videoElement.videoHeight > 0) {
 	var filters = "blur(" + (_blur.getCurVal() / 10) + "px) brightness(" + (_brightness.getCurVal() / 10) + ") contrast(" + (_contrast.getCurVal() / 10) + ") grayscale(" + (_grayscale.getCurVal() / 100) + ") hue-rotate(" + (_hue_rotate.getCurVal()) + "deg) invert(" + (_invert.getCurVal() / 100) + ") saturate(" + (_saturate.getCurVal() / 10) + ") sepia(" + (_sepia.getCurVal() / 100) + ")";
 	$("#canvas").css({
 		'-webkit-filter': filters,
 		'max-width': '100%'
 	});
 }
 setTimeout(drawCanvas, 24);
}