2017年2月
-
Augmented Reality
噔噔！一个类似阴阳师现世抽卡的小demo，由于getUserMedia的兼容性问题，目前只有安卓手机可以看到...（建议拿一些高端点的安卓机） 玩法：扫左图的二维码后，点击允许访问摄像头后，再扫右边的二维码（相当于阴阳师里的召唤阵） 或者你也可以拿另外一台手机扫下面的码来显示召唤阵 下面探索一下其实现的原理，其中主要的交互包括： 开启摄像头 > 扫码 > 显示模型 转换为相对应的技术，奏是... · getUserMedia，开启摄像头获取设备的媒体信息 · OpenCv，js-aruco, 图像处理，识别二维码 · 画出3d模型，threejs，three......
-
createjs库easeljs模块，实现粒子浮动效果（有大小、旋转、透明度变化）
最近有项目需要用到粒子浮动效果，套用组内已有的粒子浮动组件，效果明显达不到预期。so爬了下国外一页面，该页面的粒子浮动效果，使用了createjs库easeljs模块实现。以下（下文）整理了下来。 页面效果：http://f7.163.com/ （参考国外页面：http://asterisk-war.com/） html代码： <canvas id="hexaGround" height="907"></canvas> <script charset="utf-8" src="......
-
flexbox布局实践1
1、子元素等分 这种布局常用于底部的导航或者tab等分 ul{ display:flex; } li{ flex:1; } 完整代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>test1</title> <style> ......
-
简单的canvas绘图demo
最近在看canvas基础知识，刚学完绘制路径、矩形，设置线条、颜色、样式和阴影等，就想码下demo巩固下基础知识。于是网上搜了，找到了绘制XP壁纸的例子，里面用到了前面说到的各个知识点。好了，进入主题了。 html代码： <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">浏览器居然不支持Canvas?赶快换一个吧！！</canvas> js代码： window.onload = fu......
-
解决thinkjs开发jsonp接口返回Unicode时的问题
前言 第一次使用thinkjs写后端，踩了不少坑，其中有一个坑想了很久，无奈网上关于thinkjs的教程还是偏少，问了不少人，耗时很久，所以在这里mark下。 问题 需求很简单，后端返回通过接口把数据返回给前端，因为考虑到跨域问题，接口选择采用jsonp形式。其实就是平台平时提供给我们的那些接口，想想自己也能写接口，还是很激动的！类似下面的接口： 然后前端通过ajax请求接口，搞定！thingjs的controller本身就提供各种数据格式返回的封装。 比如，你要返回json格式，直接在controller里使用 async byrefererAction(self){ ......
-
写了一个Chrome扩展，方便查看NBA赛况
前言 最近写了个Chrome扩展，在这里和大家分享一下。 我们小组日常工作用的检查工具就是一个Chrome扩展程序，可以看看这篇文章，里面有一些介绍：chrome工具优化的学习小结...当然我写的这个比较简单，没那么多复杂的功能。这个其实和我们平常写web页面差不多，所以我们前端可以写，于是我也来试试这个东西~ 先来看看效果图： 默认展示当天的赛况 还有相邻两天的赛况 目录结构 ├── css │ ├── index.css │ ├── boostrap.min.css ├── img │ ├── icon-128.png │ ├── icon-48.png ......
