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

canvas的drawImage()方法可以用于绘制图片和视频。

绘制图片：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = 'https://www.yisu.com/ask/image.jpg';
img.onload = function() {
ctx.drawImage(img, 0, 0);
};

在上面的代码中，首先通过getElementById()方法获取canvas元素，然后通过getContext(‘2d’)方法获取绘图上下文。接下来创建一个Image对象，设置其src属性为图片的路径。当图片加载完成后，会触发onload事件，然后调用drawImage()方法将图片绘制到canvas中。

绘制视频：

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()函数，实现视频的连续绘制。