如何將Canvas繪制過程轉為視頻

本文轉載自查看原文 2020-08-17 07:09 495 HTML5+CSS3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>如何將Canvas繪制過程轉為視頻</title>
    <style>
        html, body {
            width： 100%;
            height: 100%;
        }
        .main {
            display: flex;
        }
        #videoContainer {
            display: none;
        }
    </style>
</head>
<body>
    <div class="main">
        <canvas width="600" height='600'></canvas>
        <div id="videoContainer">
            <h2>視頻</h2> 
            <video width='300' height='300' controls='true' autoplay='true' id='video'></video>
        </div>
    </div>
</body>
<script>
    const canvas = document.querySelector('canvas');
    const ctx = canvas.getContext('2d');
    // const {width, height}= canvas;
    const width = canvas.width;
    const height = canvas.height;

    ctx.fillStyle = 'red';

    function draw(rotation = 0){
        // save()表示保存save函數之前的狀態，restore()表示獲取save函數保存的狀態
        // save()與restore()之間的程序並不影響restore()之后的程序
        ctx.clearRect(0, 0, 1000, 1000);
        ctx.save();
        ctx.translate(width/ 2, height/ 2);
        ctx.rotate(rotation);
        ctx.translate(-width/ 2, -height/ 2);
        // beginPath() 方法開始一條路徑，或重置當前的路徑。
        ctx.beginPath();
        ctx.rect(200, 200, 200, 200);
        ctx.fill();
        ctx.restore();
    }

    (function update(t){
        draw(t/ 500);
        // 在瀏覽器下次重繪之前繼續更新下一幀動畫
        // 那么回調函數自身必須再次調用window.requestAnimationFrame()
        requestAnimationFrame(update);
    })(0);

    const stream = canvas.captureStream();
    const recorder = new MediaRecorder(stream, {mimeType: 'video/webm'});

    const data = [];
    recorder.ondataavailable = function(event){
         if(event.data && event.data.size) {
            data.push(event.data);
        }
    }

    recorder.onstop = ()=>{
        const url = URL.createObjectURL(
            new Blob(data, {type:'video/webm'})
        );
        document.querySelector("#videoContainer").style.display = "block";
        document.querySelector("video").src = url;
    };

    recorder.start();
    setTimeout(()=>{
        recorder.stop();
    },6000);
</script>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 如何將Canvas繪制過程轉為視頻 webRTC初接觸，使用canvas繪制視頻流，並添加顏色濾鏡如何將png轉為svg Android 如何將Canvas上繪制的內容保存成本地圖片（轉）做bad apple第二步： python如何將視頻變成一幀幀的圖片，如何將一幀幀的圖片轉為視頻 canvas繪制的基本步驟 canvas 繪制矩形和圓形 canvas繪制文字在 Canvas 中繪制扇形 canvas繪制圓和弧（三）