<!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>