canvas drawImage() 方法绘制图片与视频

canvas的drawImage()方法可以用于绘制图片和视频。
绘制图片：
```javascript
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = 'image.jpg';
img.onload = function() {
ctx.drawImage(img, 0, 0);
} ;
```
在上面的代码中，首先通过getElementById()方法获取canvas元素，然后通过getContext('2d')方法获取绘图上下文。接下来创建一个Image对象，设置其src属性为图片的路径。当图片加载完成后，会触发onload事件，然后调用drawImage()方法将图片绘制到canvas中。
绘制视频：
```javascript
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var video = document.getElementById('myVideo');
video.addEventListener('play', function() {
drawVideo(this, ctx, canvas.width, canvas.height);
} , false);
function drawVideo(video, ctx, width, height) {
ctx.drawImage(video, 0, 0, width, height);
setTimeout(drawVideo, 20, video, ctx, width, height);
}
```
在上面的代码中，首先通过getElementById()方法获取canvas元素和video元素，然后通过getContext('2d')方法获取绘图上下文。接下来给video元素添加play事件监听器，当视频开始播放时，调用drawVideo()函数。drawVideo()函数使用drawImage()方法将视频绘制到canvas中，然后使用setTimeout()方法每20毫秒执行一次drawVideo()函数，实现视频的连续绘制。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！