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 transprencyctx.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 marksctx.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 marksctx.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 Hoursctx.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 Minutesctx.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 secondsctx.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>

如何转视频

引入whammy.js的库，下载whammy.js，路径需要在同一级。 <script src="whammy.js"></script>
引入Whammy的viedo对象 var video = new Whammy.Video(15);
每一个画布对象添加进来 video.add(context);
动画结束时生成视频，交给框架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 transprencyctx.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 marksctx.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 marksctx.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 Hoursctx.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 Minutesctx.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 secondsctx.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>

Canvas动画转视频-前段框架whammy相关推荐

html5转换成mp4视频,HTML5的canvas动画转视频MP4
这是第三篇,主要是canvas画布上的流如何转为mp4视频并保存在本地这也是刚刚从知乎的一篇文章和查阅MDN后在Chrome 85浏览器下测试成功的.具体兼容性未知,直接代码加注释说明下实现思路co ...
前端canvas动画如何转成mp4视频
本文原创:huanghaijin 项目背景用户通过上传合适尺寸的图片,选着渲染动画的效果和音乐,可以预览类似幻灯片的效果,最后点击确认生成视频,可以放到头条或者抖音播放. 生成视频可能的方案纯前端 ...
java mp4视频转换成h5_前端canvas动画如何转成mp4视频的方法
用户通过上传合适尺寸的图片,选着渲染动画的效果和音乐,可以预览类似幻灯片的效果,最后点击确认生成视频,可以放到头条或者抖音播放. 生成视频可能的方案纯前端的视频编码转换(例如WebM Encoder ...
构造函数 + 原型链继承 + 临摹面向对象模式的canvas动画框架
感谢谢帅shawn分享的canvas动画框架,我再来分一次 //动画框架 http://neekey.net/blog/2011/05/11/canvas-%E7%AE%80%E5%8D%95%E5% ...
android canvas帧动画,html5视频，canvas，画布
逐帧所谓逐帧,就是把动画帧导出为图片,然后再用代码把没一帧的图片按照一定的频率进行切换,达到动画重组的播放效果.以3s的动画,每秒26帧的速度来计算,需要72张图片才能实现.同理如果帧数要求越高,需 ...
iOS仿写有妖气漫画、视频捕获框架、启动页广告页demo、多种动画效果等源码
iOS精选源码以tableview的section为整体添加阴影效果/ta'b'le'vi'e'w顶部悬浮-. 一个可以轻松应用自定义过滤器的视频捕获框架. 基于UITableView的组件,旨在显 ...
iOS仿写有妖气漫画、视频捕获框架、启动页广告页demo、多种动画效果等源码...
iOS精选源码以tableview的section为整体添加阴影效果/ta'b'le'vi'e'w顶部悬浮.... 一个可以轻松应用自定义过滤器的视频捕获框架. 基于UITableView的组件,旨 ...
Canvas动画制作并转为视频合并音乐
1.canvas动画说明 10种动画每种都可以拆分为前后两部分: 前部分为第一张做动作(缩放.左右上下移动), 后一部分为第二张图片进场,进场方式多种根据特效而定: 各动画的具体实现参考各动画的代码 ...
妙味canvas动画揭、秘交互式动画设计视频教程
├─第1章-运动和三角函数 │ 01-动画的基本概念.avi │ 02-常用的三角函数.avi │ 03-Math.atan与Math.atan2.avi │ 04-箭头跟随鼠 ...

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

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

写一个时钟动画

如何转视频

Canvas动画转视频-前段框架whammy相关推荐

最新文章

热门文章