Canvas視頻-7

html部分

    <canvas id="canvas">
        沒有出現圖形，說明您的瀏覽器不支持 HTML5 canvas 標籤。
    </canvas>
    <video id="video1"width="200" height="100" controls autoplay loop>
        <source src="http://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/mp4">
        <source src="http://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/ogg">
        <source src="http://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/webm">
    </video>

js部分

        // 得到繪製源
        var c = document.getElementById('canvas');
        var v = document.getElementById('video1');
        // 創建畫布，建立二維視角
        var ctx = c.getContext('2d');
        // 填充樣式
        // ctx.fillStyle = '#ff0000';
        // fillRect(x,y,width,height)繪製矩形，提供四個參數，座標以及寬高
        // ctx.fillRect(0,0,150,200);
        var i;
        v.addEventListener('play', function () {
            i = window.setInterval(function () {
                ctx.drawImage(v, 0, 0,300, 150)
            }, 20);
        }, false);
        v.addEventListener('pause', function () { window.clearInterval(i); }, false);
        v.addEventListener('ended', function () { clearInterval(i); }, false);