canvas视频教程,canvas重新绘制

　　如果用Canvas来实现一些动画效果，就需要回放。很多人通常使用屏幕录制工具来录制和播放屏幕内容。很少有人知道Canvas可以通过现代浏览器支持的Media Streams API直接转换成视频。

　　Canvas对象支持captureStream方法，该方法将返回一个MediaStream对象。然后，我们可以通过这个对象创建一个MediaRecorder来记录屏幕。

　　让我们看一个简单的例子。

录制视频

　　首先，我们用下面的代码写一个非常简单的画布动画效果：

　　const canvas=document . query selector( canvas )；const CTX=canvas . get context( 2d )；const {width，height}=画布；ctx.fillStyle= red函数draw(rotation=0){ CTX . clear rect(0，0，1000，1000)；CTX . save()；ctx.translate(宽度/2，高度/2)；ctx.rotate(旋转)；ctx.translate(-width/2，-height/2)；CTX . begin path()；ctx.rect(200，200，200，200)；CTX . fill()；CTX . restore()；}函数更新(t){ draw(t/500)；requestAnimationFrame(更新)；}更新(0)；这个效果使一个200宽200高的矩形在画布中心旋转。

　　接下来，我们来记录这个效果。假设我们录制了一个6秒钟的视频。首先，我们必须获得媒体流对象：

　　const stream=canvas . capture stream()；然后，我们创建一个MediaRecorder:

　　const recorder=new media recorder(stream，{ mime type: video/webm })；然后我们可以注册ondataavailable事件并记录数据：

　　常量数据=[]；recorder . on data available=function(event){ if(event . data event . data . size){ data . push(event . data)；}};在onstop事件中，我们通过Blob对象将数据写入页面上的video标签。

　　recorder . onstop=()={ const URL=URL . createobjecturl(new Blob(data，{ type: video/webm }))；document . query selector( # video container ). style . display= block ；document.querySelector(video )。src=url};如果你不了解Blob对象，可以看看这篇文章。

　　最后，我们开始录制视频，并将其设置为6秒后停止录制：

　　记录器. start()；settime out(()={ recorder . stop()；}, 6000);这样才能达到想要的屏幕录制效果。

　　完整的代码在https://codepen.io/akira-cn/pen/LYNVewy.

与音频结合

　　画布录制视频。我们也可以通过ffmpeg的Web端合成，把它和音频结合起来。

　　浏览器可以通过WebAssembly集成ffmpeg。具体项目在这里，有兴趣的同学可以研究一下。

　　ffmpeg的Web API使用起来相当复杂。吴起公司的同学开发了一个非常好用的软件包。项目地址在这里，具体例子可以看这里。

　　关于如何将画布绘制过程转化为视频的这篇文章到此结束。更多相关的画布绘制过程成视频内容，请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。