Canvas动画转视频-前段框架whammy

最新推荐文章于 2024-05-09 09:55:27 发布
最新推荐文章于 2024-05-09 09:55:27 发布
阅读量1.6k 收藏 4
点赞数 1
分类专栏： HTML 文章标签： canvas 视频 动画 whammy
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011368551/article/details/100211658
版权

Canvas动画转视频-前段框架whammy

whammy是在前端将canvas动画转视频，它的github地址为：https://github.com/antimatter15/whammy
由于英文比较晦涩难懂，接下来就实践一下体会whammy的用法。

写一个时钟动画

我直接在官网的demo基础上改了一些。

<canvas id="canvas" width="150" height="150"></canvas>
<script>
    
    function clock(time){
        var now = new Date();
        now.setTime(time);
        var ctx = document.getElementById('canvas').getContext('2d');
        ctx.save();
        ctx.fillStyle = 'white'
        ctx.fillRect(0,0,150,150); // videos cant handle transprency
        ctx.translate(75,75);
        ctx.scale(0.4,0.4);
        ctx.rotate(-Math.PI/2);
        ctx.strokeStyle = "black";
        ctx.fillStyle = "white";
        ctx.lineWidth = 8;
        ctx.lineCap = "round";
        
        // Hour marks
        ctx.save();
        for (var i=0;i<12;i++){
            ctx.beginPath();
            ctx.rotate(Math.PI/6);
            ctx.moveTo(100,0);
            ctx.lineTo(120,0);
            ctx.stroke();
        }
        ctx.restore();
        
        // Minute marks
        ctx.save();
        ctx.lineWidth = 5;
        for (i=0;i<60;i++){
            if (i%5!=0) {
                ctx.beginPath();
                ctx.moveTo(117,0);
                ctx.lineTo(120,0);
                ctx.stroke();
            }
            ctx.rotate(Math.PI/30);
        }
        ctx.restore();
        
        var sec = now.getSeconds();
        var min = now.getMinutes();
        var hr  = now.getHours();
        hr = hr>=12 ? hr-12 : hr;
        
        ctx.fillStyle = "black";
        
        // write Hours
        ctx.save();
        ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
        ctx.lineWidth = 14;
        ctx.beginPath();
        ctx.moveTo(-20,0);
        ctx.lineTo(80,0);
        ctx.stroke();
        ctx.restore();
        
        // write Minutes
        ctx.save();
        ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
        ctx.lineWidth = 10;
        ctx.beginPath();
        ctx.moveTo(-28,0);
        ctx.lineTo(112,0);
        ctx.stroke();
        ctx.restore();
        
        // Write seconds
        ctx.save();
        ctx.rotate(sec * Math.PI/30);
        ctx.strokeStyle = "#D40000";
        ctx.fillStyle = "#D40000";
        ctx.lineWidth = 6;
        ctx.beginPath();
        ctx.moveTo(-30,0);
        ctx.lineTo(83,0);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(0,0,10,0,Math.PI*2,true);
        ctx.fill();
        ctx.beginPath();
        ctx.arc(95,0,10,0,Math.PI*2,true);
        ctx.stroke();
        ctx.fillStyle = "#555";
        ctx.arc(0,0,3,0,Math.PI*2,true);
        ctx.fill();
        ctx.restore();
        
        ctx.beginPath();
        ctx.lineWidth = 14;
        ctx.strokeStyle = '#325FA2';
        ctx.arc(0,0,142,0,Math.PI*2,true);
        ctx.stroke();
        
        ctx.restore();
        
        return ctx;
    }

var last_time = +new Date;


var progress = 1;

function next(){
    progress++;
    clock(last_time += 1000);
    if(progress<100){
<!--        setTimeout(function (){-->
<!--                   console.log("<<<");-->
<!--<!--                   next();-->-->
<!--                   // 更好的动画方式-->
<!--                   requestAnimationFrame(next);-->
<!--                   }, 1000);-->

requestAnimationFrame(next);
    }else{
      
    }
}

next();
    
</script>

如何转视频

  1. 引入whammy.js的库，下载whammy.js，路径需要在同一级。 <script src="whammy.js"></script>
  2. 引入Whammy的viedo对象 var video = new Whammy.Video(15);
  3. 每一个画布对象添加进来 video.add(context);
  4. 动画结束时生成视频，交给框架requestAnimationFrame(finalizeVideo);

完整代码如下


<canvas id="canvas" width="150" height="150"></canvas>
<a style="display:none" id="download" download="clock.webm">Download video</a>
<script src="whammy.js"></script>
<!--1. 引入whammy.js的库-->
<script>
    
    function clock(time){
        var now = new Date();
        now.setTime(time);
        var ctx = document.getElementById('canvas').getContext('2d');
        ctx.save();
        ctx.fillStyle = 'white'
        ctx.fillRect(0,0,150,150); // videos cant handle transprency
        ctx.translate(75,75);
        ctx.scale(0.4,0.4);
        ctx.rotate(-Math.PI/2);
        ctx.strokeStyle = "black";
        ctx.fillStyle = "white";
        ctx.lineWidth = 8;
        ctx.lineCap = "round";
        
        // Hour marks
        ctx.save();
        for (var i=0;i<12;i++){
            ctx.beginPath();
            ctx.rotate(Math.PI/6);
            ctx.moveTo(100,0);
            ctx.lineTo(120,0);
            ctx.stroke();
        }
        ctx.restore();
        
        // Minute marks
        ctx.save();
        ctx.lineWidth = 5;
        for (i=0;i<60;i++){
            if (i%5!=0) {
                ctx.beginPath();
                ctx.moveTo(117,0);
                ctx.lineTo(120,0);
                ctx.stroke();
            }
            ctx.rotate(Math.PI/30);
        }
        ctx.restore();
        
        var sec = now.getSeconds();
        var min = now.getMinutes();
        var hr  = now.getHours();
        hr = hr>=12 ? hr-12 : hr;
        
        ctx.fillStyle = "black";
        
        // write Hours
        ctx.save();
        ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
        ctx.lineWidth = 14;
        ctx.beginPath();
        ctx.moveTo(-20,0);
        ctx.lineTo(80,0);
        ctx.stroke();
        ctx.restore();
        
        // write Minutes
        ctx.save();
        ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
        ctx.lineWidth = 10;
        ctx.beginPath();
        ctx.moveTo(-28,0);
        ctx.lineTo(112,0);
        ctx.stroke();
        ctx.restore();
        
        // Write seconds
        ctx.save();
        ctx.rotate(sec * Math.PI/30);
        ctx.strokeStyle = "#D40000";
        ctx.fillStyle = "#D40000";
        ctx.lineWidth = 6;
        ctx.beginPath();
        ctx.moveTo(-30,0);
        ctx.lineTo(83,0);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(0,0,10,0,Math.PI*2,true);
        ctx.fill();
        ctx.beginPath();
        ctx.arc(95,0,10,0,Math.PI*2,true);
        ctx.stroke();
        ctx.fillStyle = "#555";
        ctx.arc(0,0,3,0,Math.PI*2,true);
        ctx.fill();
        ctx.restore();
        
        ctx.beginPath();
        ctx.lineWidth = 14;
        ctx.strokeStyle = '#325FA2';
        ctx.arc(0,0,142,0,Math.PI*2,true);
        ctx.stroke();
        
        ctx.restore();
        
        return ctx;
    }

<!-- 2. 引入Whammy的viedo -->
var video = new Whammy.Video(15);

var last_time = +new Date;

var progress = 1;

function next(){
    progress++;
    var context = clock(last_time += 1000);
<!-- 3. 每一个画布对象添加进来 -->
    video.add(context);
    if(progress<100){
<!--        setTimeout(function (){-->
<!--                   console.log("<<<");-->
<!--<!--                   next();-->-->
<!--                   // 更好的动画方式-->
<!--                   requestAnimationFrame(next);-->
<!--                   }, 1000);-->

requestAnimationFrame(next);
    }else{
<!--  4. 结束动画时，生成视频 -->
      requestAnimationFrame(finalizeVideo);
    }
}

function finalizeVideo(){
    var start_time = +new Date;
    video.compile(false, function(output){
                  
                  var end_time = +new Date;
                  var url = webkitURL.createObjectURL(output);
                  console.log("url:"+url);
                  document.getElementById('download').style.display = '';
                  document.getElementById('download').href = url;
                  });
}

next();
    
</script>
Android唐浮
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
getUserMedia 调用 video，audio 报错 OverconstrainedError
Paige's Blog
07-06 7727
在开发中需要侦测视频中的的动作幅度，方向以及用户音量大小，所以需要调用媒体使用 navigator.mediaDevices.getUserMedia 调用媒体的前提条件：1.https2.IOS、OS操作系统Safari11之后才支持3.在微信浏览器中：    Android：OK    IOS:不支持，IOS微信浏览器的内核是用的Safari9+，前面说了要Safari11之后才支持(201...
创新高性能移动UI框架-CanvasUI框架
01-30
最近有人在知乎讨论ReactNative，我也凑个热闹，来个技术贴。WebView里无法获得的能力虽然是「体验增强」与「端基本能力」，但现都基本上有成熟解决方法。但后期的 UI和Layout的性能反而是目前Web技术欠缺的。所以，无论是Titanium与React Native都是解决性能作为探索的出发点。慢与快的标准，是按照每秒大于等于60FPS（60帧每秒）的理论，而为什么是60FPS，这不多描述。按此理论，那么「每帧」里所有的操作都必须在1
canvas 录制视频和播放
03-09
插件描述：canvas 录制视频和播放。 参考实例：http://www.jq22.com/jquery-info6133
Canvas动画转视频-前段框架whammy，阿里一线架构师技术图谱
rdytfuygiohi的博客
04-01 131
/ 更好的动画方式。1. 引入whammy.js的库。
canvas渲染帧动画
qq_34701838的博客
03-09 457
<style> canvas{background:#ccc;} .load{position:absolute;left:0px;top:0px;width:100%;height:100%;background:#333;z-index:100;display:none;} .loading{width:50px;height:50px;margin:0 auto;border-radius:90%;background:#666;position:relative.
js 判断浏览器是否支持webp图片格式
qq_39151367的博客
12-28 544
js 判断浏览器是否支持webp图片格式 function checkWebp () { try { return (document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0); } catch (err) { return false; } }; ...
Whammy：实时JavaScript WebM编码器
最新发布
gitblog_00085的博客
05-09 393
Whammy：实时JavaScript WebM编码器 项目地址:https://gitcode.com/antimatter15/whammy 在Web开发的世界中，创新和效率是持续追求的目标。Whammy是一个独特的开源项目，它为您的浏览器带来了一个实时的JavaScript WebM视频编码器。这个小巧而强大的工具挑战了传统的图像处理边界，让我们一起深入了解它的魅力。 项目介绍 Whammy...
web 实时播放 whammy.js
AsBefore麦小兜
03-29 494
先在当前播放视频的页面混入 wfsMixins.js /* eslint-disable no-undef */ import '@/utils/statics/wfs'; // import Wfs from '@/views/project/Dashboard/Mixin/wfs'; export default { data() { return { wfs: new Wfs() }; }, watch: { windowHidden(val) .
实时的WebM编码器Whammy.js.zip
07-17
Whammy.js 是一个实时的 WebM 编码器，点击图片查看演示：示例代码：var encoder = new Whammy.Video(15);  encoder.add(context or canvas or dataURL);  var output = encoder.compile();  var url = (window.webkitURL || window.URL).createObjectURL(output); 标签：Whammy
CCapturejs可以对网页中Canvas的动画进行捕获录制成视频
08-11
CCapture.js 可以使用固定的帧率实现对网页中 Canvas 的动画进行捕获，录制成视频。CCapture.js 依赖于 Whammy.js 和 gif.js。
JavaScriptWebM编码器webm.js.zip
07-17
webm.js 是纯 JavaScript 实现，没有服务端的 JavaScript WebM 编码器，可以在浏览器中创建 WebM 视频。webm.js 是简单的单页应用，允许你转换视频成为 WebM 格式，插入到浏览器中，无需任何插件或者服务端参与。webm.js 基于 FFmpeg，libvpx 和 libopus。 标签：webmjs
webp解析器
01-22
webp后缀文件的读取器 ，可以查看webp文件，他是谷歌的一个压缩格式
whammy-cross-browser-demo:whammy 只支持支持 webp 图片格式的浏览器，目前只有 Opera 和 Chrome 支持。
06-08
#whammy 跨浏览器演示 目前 whammy webm 编码器仅支持支持 webp 图像格式的浏览器，但目前只有 chrome 和 opera 是唯一支持 webp 格式的浏览器。 这个努力是为了表明通过一些轻微的修改，我们仍然可以使用 whammy.js 在所有浏览器中运行。 如何使用 //----------------------------------------------------------------------------- //how to initialize var whammy_cross = new WhammyCrs(); whammy_cross.reset(); whammy_cross.progress = function(presentatge){ //calls when webm encodes and shows presenta
statics.zip
03-29
whammy.js 用于web实时播放视频
构建canvas动画框架
03-02
于是决定自己写一个简单一点的动画框架，以便能更方便地构建出一些动画效果。我将分几个章节来讲述我这个小动画框架的实现：这一节我们先来说说通用类的提取。其实上一篇文章我已经用到了这种从flash借鉴来的思路：...
前端canvas动画如何转成mp4视频的方法
12-13
用户通过上传合适尺寸的图片，选着渲染动画的效果和音乐，可以预览类似幻灯片的效果，最后点击确认生成视频，可以放到头条或者抖音播放。 生成视频可能的方案 纯前端的视频编码转换(例如WebM Encoder Whammy) 图片...
ie浏览器不支持webp格式图片
AuB__的博客
02-18 2546
最后加 ?imageMogr2/format/jpeg
canvas详解03-回执图像和视频
07-08
Canvas 是 HTML5 中的一个元素，它提供了一种在网页上绘制图形、动画和视频的方法。要回执图像和视频，可以使用 Canvas 的 drawImage 方法。 要回执图像，首先需要创建一个 Image 对象，并将图像的路径指定给它。然后，可以使用 Canvas 的 drawImage 方法将图像绘制到 Canvas 上。这个方法接受几个参数，包括图像对象、图像的起始坐标以及可选的宽度和高度。 下面是一个回执图像的示例： ```javascript var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0, canvas.width, canvas.height); }; img.src = "path/to/image.jpg"; ``` 要回执视频，可以使用 HTML5 的 video 元素。首先，创建一个 video 元素，并将视频的路径指定给它。然后，可以使用 Canvas 的 drawImage 方法将视频绘制到 Canvas 上。与回执图像类似，这个方法接受几个参数，包括视频元素、视频的起始坐标以及可选的宽度和高度。 下面是一个回执视频的示例： ```javascript var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var video = document.getElementById("myVideo"); video.addEventListener("play", function() { setInterval(function() { ctx.drawImage(video, 0, 0, canvas.width, canvas.height); }, 1000 / 30); }, false); video.src = "path/to/video.mp4"; ``` 这些示例代码演示了如何使用 Canvas 回执图像和视频。你可以根据自己的需求进行调整和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值