將圖片繪制到畫布上

本文轉載自查看原文 2019-03-18 21:51 526 canvas

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <canvas id="canvas1" width="600" height="400"></canvas>
        <video  width="600" height="" src="img/gaoxiao.mp4"   hidden="hidden">
        
        </video>
        
        <button>開始播放</button>
        <script type="text/javascript">
            var canvas1 = document.querySelector('#canvas1')
            var ctx = canvas1.getContext('2d')
            var v1 = document.querySelector('video')
            
            var logoImg = new Image()
            logoImg.src = 'img/logo.png'
            
//            document.querySelector('video').autoplay = true;
            
//            //繪制圖片，所以要首先由圖片對象
//            var img = new Image()
//            img.src = 'img/mobile.jpg'
//            //必須要等待圖片加載完畢才能繪制圖片
//            img.onload = function(){
//                ctx.drawImage(img,100,100,300,400)
//            }
            
            function drawVideo(){
                setInterval(function(){
                    //可以繪制圖片，也可以繪制視頻
                    ctx.drawImage(v1,0,0,600,400)
                    ctx.drawImage(logoImg,50,50,100,50)
                    //繪制文字
                    ctx.textAlign = 'center'
                    ctx.font = '50px 微軟雅黑'
                    ctx.fillStyle = 'skyblue'
                    ctx.fillText('這是一個百度',100,100)
                },20)
            }
            
            
            document.querySelector('button').onclick = function(){
                document.querySelector('video').play()
                drawVideo()
            }
            
            
            
        </script>
        
        
    </body>
</html>

免責聲明！

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

猜您在找 將圖片繪制到畫布上：imagecopy() 如何在html5的canvas畫布中繪制gif動態圖片探索canvas畫布繪制技術 Android畫布和圖形繪制---Canvas and Drawables canvas畫布導出圖片並下載 PHP圖片處理之圖片背景、畫布操作 canvas.toDataURL 畫布導出圖片微信小程序畫布（圖片圓角）用html5的canvas畫布繪制貝塞爾曲線利用H5中canvas畫布繪制一個時鍾(動態)