最近更新了之前发布的语音识别框架MyVoix,加入了麦克风的波形分析效果.没有看过MyVoix介绍的同学请猛戳(传送门) Github地址 在新的更新中,波形分析可以绑定麦克风源,也可以单独配合别的音源使用.首先看一下对麦克风进行波形绘制的代码. <!DOCTYPE HTML> <html> <head> <title></title> <meta http-equiv="Content-type" content=&q…
楔 子 随着移动互联网时代的开启,各种移动设备走进了我们的生活.无论是日常生活中人手一部的手机,还是夜跑者必备的各种智能腕带,亦或者是充满未来科技感的google glass云云,它们正渐渐改变着我们的生活习惯以及用户交互习惯.触摸屏取代了实体按键,Siri开始慢慢释放我们的双手,而leap motion之类的硬件更是让我们彻底不需要接触IT设备便能通过手势控制它们.在这样的大背景下,前端的交互将涉及越来越多元的交叉学科,我们正如十几年前人们经历Css的诞生一样,见证着一场带动整个行业乃至社会的…
一.折线 var draw = SVG('svg1').size(300, 300); //画折线 //使用字符串点 // var polyline=draw.polyline('0,0 100,50 50,100'); // polyline.fill('none').stroke({width:2}); //使用数组点 var polyline = draw.polyline([ [0, 0], [100, 50], [50, 100] ]); polyline.fill('none').s…
一.效果图 二.在vue中引入raphael.js npm i raphael -S 三.封装一个名为StreetMap的组件,代码如下 <template> <div> <div id='streetMap'> <div class="tips" v-show="tipsShow" :style="tipsStyle"> <span v-html="tipsContent"…
原版是jquery-pager-1.0.js,经过变更修改加上按照项目中的一些需要修改过来. //初始化分页控件 PagerOptions为配置参数 url为要提交的url地址,如果不需要提交则可以为null或"" //options 为提交到服务端的参数,如果不提交则传递到callback方法 //callback 方法回调,点击分页按钮时执行 callback返回总数 //如果不提交到服务端,则此callback方法为CallBack(PageIndex,PageSize,Opti…
在npm官网找到了:微信官方 js-sdk CommonJS 版https://www.npmjs.com/package/weixin-js-sdk 步骤一:引入JS文件在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.0.0.js备注:支持使用 AMD/CMD 标准模块加载方法加载步骤二:通过config接口注入权限验证配置所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅…
1.首先申明,没有使用vue 的组件,以及脚手架等,都是一些基础语法的使用. -------------------------------------------------------------------- 2.自己的项目结合使用jquery,首先引入vue2.0.js和jquery vue2.0下载地址:https://cn.vuejs.org/v2/guide/installation.html --------------------->生产版本 3.建立view层--------…
[文章摘要] 最近用开源的AdminLTE做框架感觉效果特别好,其针对图表库Morris.js和flot都提供了不错的支持,也都提供了这两者的例子.不过Morris.js是基于Raphael.js来的,也就是其使用SVG和VML来绘制图形,而flot则是使用Canvas进行绘制,在绘制效率和浏览器兼容性等方面会有出入,同时两者需要的数据格式也不相同.本文中对两者的使用和性能进行了比较. [文章索引] Morris.js的使用 flot的使用 性能比较 [一.Morris.js的使用] Morri…
在web页,要画一个圆.有很多方法,SVG.canvas我们能够得出. 但文章没有使用这两种方法,但使用的div.div通常一个矩形.但是,假设一个圆形的样式设置border-radius有可能div变圆. 回合职位要求在画布上绝对定位(position: absolute).也就是通过设置X.Y坐标在定位.相应的css样式是left.top.想要圆的绝对定位起效.画布就要设置position:relative. <!DOCTYPE html> <html> <head>…
摘要: 1. webgl 概念挺多的, 顶点着色器.片段着色器, 坐标 2. 绘制前期准备工作好多 目前看的比较好的教材: https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API/Tutorial 参考学习:http://blog.csdn.net/tiewen/article/details/6895582 实例代码: <html> <head> <meta http-equiv="content-ty…