canvas.js
window.onload=function() {
var canvas = document.getElementById('canvas');
var ctx= canvas.getContext('2d');
var img=document.getElementsByTagName('img')[0];
ctx.drawImage(img,0,0,200,200);
var video=document.getElementById('video');
canvas.onclick=function() {
video.play();
video.addEventListener("play", function () {
setInterval(function() {
ctx.drawImage(video,0,0,200,200);
},20);
});
}
};
canvas.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<script type="text/javascript" src="canvas1.js"></script>
<style>
canvas {
background: #eeeeee;
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<img src="不二.jpg" hidden >
<video src="陈奕迅 - 陪你度过漫长岁月.mp4" id="video" hidden>
</video>
</body>
</html>
效果：
2017-09-11 13:21:15