day-5-画图绘制视频

最新推荐文章于 2024-06-12 20:16:27 发布

铭心NTeen

最新推荐文章于 2024-06-12 20:16:27 发布

阅读量123

点赞数

分类专栏： HTML5 文章标签： HTML5 canvas

本文链接：https://blog.csdn.net/qq_25238675/article/details/103442672

版权

HTML5 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

画图

var canvas=document.getElementById('canvas');
    var cxt=canvas.getContext('2d');

    var oimg=new Image();
    oimg.src='download.jpg';
    oimg.onload=function(){
        console.log('下载完成');
       // cxt.drawImage(oimg,0,0,canvas.width,canvas.height);//画图片
        cxt.drawImage(oimg,100,40,100,100,100,100,100,150);//截图
    }

绘制视频

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        #canvas{
            display: block;
            border:2px solid blue;
            margin:100px auto;
        }
    </style>
</head>
<body>
<video src="1.mp4" width="500" controls></video>
<canvas width="500" height="400" id="canvas"></canvas>


<script>
    var canvas=document.getElementById('canvas');
    var cxt=canvas.getContext('2d');
    var video=document.querySelector('video');



    setInterval(function(){
        cxt.drawImage(video,0,0,500,400);
    },13)






</script>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

铭心NTeen

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day-5-画图绘制视频

画图var canvas=document.getElementById('canvas'); var cxt=canvas.getContext('2d'); var oimg=new Image(); oimg.src='download.jpg'; oimg.onload=function(){ console.log('下载完成');...
复制链接

扫一扫