canvas视频处理

<!DOCTYPE html>

<html>


<head>

<meta charset="UTF-8">

<title></title>

</head>


<body>

<video src="videoviewdemo.mp4" autoplay="" id="video" loop="">你的浏览器不支持视频</video>

<canvas id="canvas" width="500" height="500">你的浏览器啥都不支持</canvas>

<script type="text/javascript">

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

var video = document.getElementById("video");

// video的oncanplay事件类似于图像的onload,加载完成之后

video.oncanplay = function() {

function drawVideo() {

ctx.drawImage(video, 0, 0);

chuLiVideo();

window.requestAnimationFrame(drawVideo);

}

drawVideo();


}


function chuLiVideo() {

var imageData = ctx.getImageData(0, 0, 500, 500);

var pxs = imageData.data;

for(var i = 0; i < pxs.length; i += 4) {

var r = pxs[i];

var g = pxs[i + 1];

var b = pxs[i + 2];

// 黑白

pxs[i] = (r + g + b) / 3;

pxs[i + 1] = (r + g + b) / 3;

pxs[i + 2] = (r + g + b) / 3;

}

ctx.putImageData(imageData, 0, 0, 230, 0, 250, 500);

}


function cheng(i) {

if(i == 1) {

return 1;

} else {

return i * cheng(i - 1);

}

}

console.log(cheng(5));

// 回文

var i = 0;

function huiWen(str) {

var half = parseInt(str.length / 2);

if (str[i] != str[str.length - 1 - i]) {

return false;

}else{

i++;

if(i < half){

return huiWen(str);

}else{

return true;

}

}

}

console.log(huiWen('abccba'));

</script>

</body>


</html>

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值