畫圖
var canvas=document.getElementById('canvas');
var cxt=canvas.getContext('2d');
var oimg=new Image();
oimg.src='download.jpg';
oimg.onload=function(){
console.log('下載完成');
// cxt.drawImage(oimg,0,0,canvas.width,canvas.height);//畫圖片
cxt.drawImage(oimg,100,40,100,100,100,100,100,150);//截圖
}
繪製視頻
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
<style>
#canvas{
display: block;
border:2px solid blue;
margin:100px auto;
}
</style>
</head>
<body>
<video src="1.mp4" width="500" controls></video>
<canvas width="500" height="400" id="canvas"></canvas>
<script>
var canvas=document.getElementById('canvas');
var cxt=canvas.getContext('2d');
var video=document.querySelector('video');
setInterval(function(){
cxt.drawImage(video,0,0,500,400);
},13)
</script>
</body>
</html>