炫丽的倒计时效果Canvas绘图与动画视频的资源推荐_H5之家

Canvas顾名思义是定义在浏览器上画布，但Canvas不仅仅是一个元素，它更是一套编程的接口，它的出现已然超过了Web基于文档的设计初衷。利用它你可以开发出很多梦寐以求的内容，让编程工作者彻底释放自己的创造力！

ZE05G1{28JM3WAEYXN935IU.png

课程播放地址：

该老师讲课风格:

教师讲课深入浅出，条理清楚，层层剖析，环环相扣，论证严密，结构严谨，用思维的逻辑力量吸引学生的注意力，用理智控制课堂教学进程。学生通过听教师的讲授，不仅学到知识，也受到思维的训练，还受到教师严谨的治学态度的熏陶和感染

本视频中较为难点是倒计时效果Canvas绘图与动画了：

HTML:

JS :　

var canvas = document.getElementById('canvas');　 var context = canvas.getContext('2d');// 注意，是不加单位的，而且不建议在css中设置宽高。最好是调用width和height这两个属性 canvas.width = 1024; canvas.height = 768;

　实践：绘制直线（要非常注意，状态一定要先设置才能调stroke()方法进行绘制，如果顺序颠倒，将不会出结果，而且不报错，debugger也调不出问题来。）

// 先设置状态 context.moveTo(100, 100); context.lineTo(700, 700); context.lineTo(700, 100); context.lineTo(100, 100); context.lineWidth = 10; context.strokeStyle = "pink"; // 再进项绘制 context.stroke();

定义一个路径：

context.moveTo(100, 100); //接受两个参数，表示x坐标和y坐标 context.lineTo(700, 700);

　　定义多个路径：用如下方法将要定义的状态包裹住，再调用stroke()方法，既可绘制不同状态的线条

context.beginPath(); context.closePath();

　　七巧板的绘制：图1为老师绘制，图2我绘制。。哈哈哈哈，可真粗糙。下节课学习绘制圆和弧线，把canvas系统学习下来后就去尝试使用js的碰撞技术做一下七巧板的移动拼接成不同的图形

以上就是炫丽的倒计时效果Canvas绘图与动画视频的资源推荐的详细内容，更多请关注php中文网其它相关文章！

单纯的音乐播放是否过于单调，在听音乐的同时如果也能看见音乐是否更加带感。本课程将带领你使用webAudio和canvas将你的音乐以你喜欢的形式可视化出来，让你的音乐动起来。

~DV%DZL]D8HA(]R1HH%$7KK.png

课程播放地址：

该老师讲课风格:

本视频中较为难点是HTML5音乐可视化了：

音乐的获取与播放

构建应用的前后端

1，新建媒体数据文件夹，public/media，把音频数据放入其中
2，搭建页面CSS框架，/public/stylesheets/index.css
3，读取页面内容，views/index.ejs
4，后台路由控制，routes/index.js，获取音乐列表并返回给前段

ajax请求服务端音频数据

在javascripts下新建文件index.js，在views/index.ejs引用创建的文件

编辑创建文件，实现点击效果

<ul id="list"> <% music.forEach(function(name){ %> <li title="<%= name %>"><%= name %></li> #设置title属性 <% }) %> </ul>

解码并播放音频

AudioContext

包含各个AudioNode对象以及它们的联系的对象，即audio上下文对象。一个document中只有一个AudioContext创建：var ac = new window.AudioContext();

属性：

destination，AudioDestinationNode对象，所有的音频输出聚集地，相当于音频的硬件，所有的AudioNode都直接或间接连接到这里。

currentTime，AudioContext从创建开始到当前的时间（秒）。

方法：

decodeAudioData(arrayBuffer,succ(buffer),err)，异步解码包含在arrayBuffer中音频数据

createBufferSource()，创建autioBufferSourceNode对象

createAnalyser()，创建AnalyserNode对象

createGain()/createGainNode()，创建GainNode对象

AudioBufferSourceNode

表示内存中的一段音频资源，其音频数据存储在AudioBuffer中（其buffer属性）
创建：var buffersource = ac.createBufferSource();

属性：

buffer，AudioBuffer对象，表示要播放的音频资源数据
——子属性：duration，该音频资源的时长（秒）

loop，是否循环播放，默认false

onended，可绑定音频播放完毕时调用的时间处理程序

方法：

start/noteOn(when=ac.currentTime,offset=0,buration=buffer.duration-offset)，开始播放音频。
when：何时开始播放；
offset：从音频的第几秒开始播放；
duration：播放几秒

stop/noteOff(when=ac.currentTime)，结束播放音频

添加音量控制

GainNode

改变音频音量的对象，改变通过它的音频数据所有的sampleframe的信号强度
创建：var gainNode = ac.createGain()/ac.createGainNode();

gain，AudioParam对象，通过改变其value值可以改变音频信号的强弱，默认的value属性值为1，通过最小值为0，最大值为1，其value值也可以大于1，小于0

播放bug修复

问题：播放第二首歌时，第一首歌依然在播放，主要原因是每次点击音乐列表即调用load("/media/"+this.title)，数据解码并播放：

xhr.onload = function(){ ac.decodeAudioData(xhr.response, function(buffer){ var bufferSource = ac.createBufferSource(); bufferSource.buffer = buffer; bufferSource.connect(gainNode); bufferSource[bufferSource.start?"start":"noteOn"](0); }, function(err){ console.log(err); }); }

解决方法：
对音频数据赋空值var source = null;，保存上一首歌的解码数据source = bufferSource;，判断执行停止播放source && source[source.stop ? "stop" : "noteoff"](0);

音乐数据可视化

AnalyserNode

音频分析对象，它能实时的分析音频资源的频域和时域信息，但不会对音频流做任何处理
创建：var analyser = ac.createAnalyser();

fftSize，设置FFT（FFT是离散傅里叶变换的快速算法，用于将一个信号变换到频域）值得大小，用于分析得到频域，为32 - 2048之间2的整数倍，默认为2048。实时得到的音频频域的数据个数为FFTSize的一半

frequencyBinCount，FFT值得一半，即实时得到的音频频域的数据个数

getByteFrequencyData(Uint8Array)，复制音频当前的频域数据（数量是FrequencyBinCount）到Uint8Array（8位无符号整型类型化数组）中

创建Analyser对象：

var analyser = ac.createAnalyser(); analyser.fftSize = 512; analyser.connect(gainNode);

连接到分

析对象获取数据：bufferSource.connect(analyser);

实现可视化功能函数：

function visualizer(){ var arr = new Uint8Array(analyser.frequencyBinCount); analyser.getByteFrequencyData(arr); console.log(arr); }

调用visualizer函数：

利用canvas将音乐数据可视化（柱状图）

在views下加入id<p class="right" id="box"></p>