Canvas--绘制图像及视频

1、通过 drawImage() 方法在canvas上绘制图像

　　drawImage() 有三种用法：

　　1） context.drawImage(img,x,y) ： 在画布上定位图像，图像以自身大小显示。

　　2） context.drawImage(img,x,y,width,height) ： 在画布上定位图像，并规定图像的宽度和高度。

　　3） context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height) ： 剪切图像，并在画布上定位被剪切的部分。

　　参数：

　　  img  ---- 规定要使用的图像、画布或视频。

　　    x    ---- 在画布上放置图像的 x 坐标位置。

　　    y    ---- 在画布上放置图像的 y 坐标位置。

　    width ---- 可选。要使用的图像的宽度（伸展或缩小图像）。

　    height---- 可选。要使用的图像的高度（伸展或缩小图像）。

　　    sx   ---- 可选。开始剪切的 x 坐标位置。

　　    sy   ---- 可选。开始剪切的 y 坐标位置。

　　swidth ---- 可选。被剪切图像的宽度。

　　sheight---- 可选。被剪切图像的高度。

var IMG = new Image()
IMG.src = 'img.jpg'

IMG.onload = function() {
    context.drawImage(IMG, 0, 0)
    context.drawImage(IMG, 740, 0, 736, 490)
    context.drawImage(IMG, 0, 0, 300, 200, 0, 500, 300, 200)
}

2、绘制视频

<video id="video" controls width="270">
    <source src="video/mov_bbb.mp4" type="video/mp4">
    <source src="video/mov_bbb.ogg" type="video/ogg">
</video>
<canvas id="canvas">Your browser does not support canvas</canvas>

var video = document.getElementById('video')
var timer

if (window.requestAnimationFrame) {
    video.addEventListener('play', draw)
} else {
    video.addEventListener('play', function() {
        timer = setInterval(function() {
            context.drawImage(video, 0, 0)
        }, 20)
    })

    video.addEventListener('pause',function(){
        clearInterval(timer)
    })

    video.addEventListener('pause',function(){
        clearInterval(timer)
    })

}

function draw() {
    var stop = window.requestAnimationFrame(draw)
    context.drawImage(video, 0, 0)

    video.addEventListener('pause', function() {
        window.cancelAnimationFrame(stop)
    })

    video.addEventListener('ended', function() {
        window.cancelAnimationFrame(stop)
    })
}