绘制图像
context.drawImage(image, x, y, w, h)
参数：
image: 规定要使用的图像，画布或者视频，
x : 在画布上放置图像的x轴坐标位置
y： 在画布上方式图像的y轴坐标位置
w：使用图像的宽度
h: 使用图像的高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload=function(){
var canvas=document.querySelector('canvas');
var context=canvas.getContext('2d');
// 创建img节点 绘制图片到画布中
var img = new Image();
img.src = '../images/2.jpeg';
img.onload=function(){
//图像加载完成 绘制画布中
context.drawImage(img,0,0,300,200);
}
}
</script>
</head>
<body>
<canvas width="400px" height="300px" style="background-color: rgb(183, 214, 241);"></canvas>
</body>
</html>
绘制视频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload=function(){
var canvas=document.querySelector('canvas');
var context=canvas.getContext('2d');
// 获取video
var video = document.querySelector('video');
// 声明绘制视频的方法
draw();
function draw(){
context.drawImage(video,0,0,400,400);
// 请求动画桢
requestAnimationFrame(draw);
}
}
</script>
</head>
<body>
<canvas width="400px" height="400px" style="background-color: rgb(109, 181, 245);"></canvas>
<video src="../音视频/1.mp4" width="400px" controls></video>
</body>
</html>
画布绘制的视频会和原视频同步播放，但是没有原视频中的控制条等控件
