- 博客(42)
- 收藏
- 关注
RSS订阅转载 jscodeshift 简易教程
本文首发于 https://github.com/whxaxes/blog/issues/10背景jscodeshift 是 fb 出的一个 codemod toolkit，基于 recast 这个 js 解析器封装了很多方便使用的工具方法。但是由于官网对使用方式的描述有点谜，刚用起来会有点蛋疼，所以写篇教程说一下。简单先说明一下 jscodeshift 能用来干嘛，其实就是能够解...
2017-10-19 18:10:00
774
转载 Node Inspector 代理实现
本文首发于 https://github.com/whxaxes/blog/issues/9背景平时做 node 开发的时候，通过 node inspector 来进行断点调试是一个很常用的 debug 方式。但是有几个问题会导致我们的调试效率降低。问题一：当使用 vscode 进行断点调试时，如果应用是通过 cluster 启动的 inspector，那么每次当 worker 挂...
2017-10-19 10:11:00
217
转载 解读 Vue 之 Reactive
本文同步发表在 https://github.com/whxaxes/blog/issues/7前言在一篇文章中简单讲了 vue 是如何把模板解析成 render function 的，这一篇文章就来讲讲 vue 是如何把数据包装成 reactive，从而实现 MDV(Model-Driven-View) 的效果。先说明一下什么叫 reactive，简单来说，就是将数据包装成一种可...
2017-08-12 20:23:00
1413
转载 使用 electron 做个播放器
使用 electron 做个播放器本文同步更新在：https://github.com/whxaxes/blog/issues/8前言虽然 electron 已经出来好长时间了，但是最近才玩了一下，写篇博文记录一下，以便日后回顾。electron 的入门可以说是相当简单，官方提供了一个 quick start，很流畅的就可以跑起来一个应用。为啥要做个播放器呢，因为我在很久很久...
2017-07-11 17:39:00
849
转载 说说如何用js实现一个模板引擎
本文同步更新在： https://github.com/whxaxes/blog/issues/4 ，在 github 看文章显示效果会更好一些。前言不知不觉就很长时间没造过什么轮子了，以前一直想自己实现一个模板引擎，只是没付诸于行动，最近终于在业余时间里抽了点时间写了一下。因为我们的项目大部分用的是 swig 或者 nunjucks ，于是就想实现一个类似的模板引擎。至于为什么要...
2017-03-13 13:53:00
122
转载 仿造slither.io第二步：加个地图，加点吃的
前言上一篇博文讲了如何造一条蛇，现在蛇有了，要让它自由的活动起来，就得有个地图啊，而且只能走也不行呀，还得有点吃的，所以还得加点食物，这一篇博文就来讲讲如何添加地图和食物。预览效果当前项目最新效果：http://whxaxes.github.io/slither/ （由于代码一直在更新，效果可能会比本文所述的更多）功能分析slither.io的地图是类似于rpg游戏的大地图，所...
2016-04-30 10:17:00
232
转载 仿造slither.io第一步：先画条蛇
前言最近 slither.io 貌似特别火，中午的时候，同事们都在玩，包括我自己也是玩的不亦乐乎。好久好久没折腾过canvas相关的我也是觉得是时候再折腾一番啦，所以就试着仿造一下吧。楼主也没写过网络游戏，所以实现逻辑完全靠自己YY。而且楼主心里也有点发虚，因为有些逻辑还是不知道怎么实现呀，所以不立flag，实话实说：不一定会更新下去，如果写到不会写了，就不一定写了哈~为啥取名叫...
2016-04-29 19:17:00
486
转载 用 canvas 做个好玩的网站背景
不知不觉又好久没更过博客了，老调新弹一下，之前做的一个小效果，觉得蛮有意思的，也有朋友问是怎么做的，就分享一下，写个博文吧。 先上demo吧：http://whxaxes.github.io/canvas-test/src//Funny-demo/netparticle/net_1.html 上面这个demo是最早写的，后来做了点小修改后就用到了自己的网站上当个ban...
2015-11-12 20:16:00
1151
转载 Koa框架实践与中间件原理剖析
最近尝试用了一下Koa，并在此记录一下使用心得。 注意：本文是以读者已经了解Generator和Promise为前提在写的，因为单单Generator和Promise都能够写一篇博文来讲解介绍了，所以就不在这里赘述。网上资料很多，可以自行查阅。 Koa是Express原班人马打造的一个更小，基于nodejs平台的下一代web开发框架。Koa的精妙之处就在于其使用gene...
2015-07-28 16:07:00
99
转载 canvas 2d 贴图技术实践
最近在公司内部的技术协会论坛里闲逛的时候，无意中发现了一篇手淘前端大牛岑安两年前写的博文，讲述了canvas的2d贴图技术。看到后觉得相当神奇。于是就自己实现了一下。不过岑安前辈的那篇博文也只是大概讲述了一下实现思路，整个逻辑还是自己慢慢摸索出来的，过程还是挺心酸的，所以在此记录一下并且分享一下，让跟我一样喜欢canvas的人有所收获吧。 废话不说，先把demo贴出来，好歹让大...
2015-07-15 09:35:00
272
转载 用canvas 实现个图片三角化（LOW POLY）效果
之前无意中看到Ovilia用threejs做了个LOW POLY，也就是图片平面三角化的效果，觉得很惊艳，然后就自己花了点时间尝试了一下。 我是没怎么用过threejs，所以就直接用canvas的2d绘图API来做，因为感觉似乎这效果也用不上threejs。 直接上demo先：http://whxaxes.github.io/canvas-test/src/Funny-...
2015-06-28 14:04:00
117
转载 移动前端—图片压缩上传实践
此前有同事跟我聊过关于移动端用canvas压缩图片后再上传的功能，最近有了点空闲时间，所以就实践了一下。demo效果链接在文章底部贴出。 在做移动端图片上传的时候，用户传的都是手机本地图片，而本地图片一般都相对比较大，拿iphone6来说，平时拍很多图片都是一两M的，如果直接这样上传，那图片就太大了，如果用户用的是移动流量，完全把图片上传显然不是一个好办法。 目前来说，...
2015-06-27 13:45:00
492
转载 nodejs实现Websocket的数据接收发送
在去年的时候，写过一篇关于websocket的博文：http://www.cnblogs.com/axes/p/3586132.html，里面主要是借助了nodejs-websocket这个插件，后来还用了socket.io做了些demo，但是，这些都是借助于别人封装好的插件做出来的，websocket到底是怎么实现的呢自己之前真没怎么去想过，最近在看朴灵大神的《深入浅出nodej...
2015-05-19 11:56:00
1153
转载 nodejs学习之实现简易路由
此前实现了个数据转发功能，但是要建本地服务器，还需要一个简易的路由功能。因为只是用于本地服务器用于自己测试用，所以不需要太完善的路由功能，所以也就不去使用express框架，而是自己实现一个简易路由，可以针对自己的需求来定制路由功能。 在制作路由功能之前，我先写了一张路由表，表明了自己大概想要实现的四种路由转换效果，这四种效果也正是自己项目需要的： { "/m...
2015-05-10 11:36:00
125
转载 nodejs学习之实现http数据转发
此前在做项目的时候，一直用json文件用作模拟数据，后来发现了mock.js，于是就用了mock.js，再后来感觉这些数据再怎么模拟都是静态数据。所以就想用nodejs实现一个数据转发功能，在本地拉取服务端的数据。那时就简易做出了一个针对那个项目的数据拉取功能。而在最近，在看一些博客的时候，想把几个博客的页面内容全部拉取到一个页面来看。所以就把此前数据拉取功能稍作改造封装了一下。...
2015-04-29 17:06:00
236
转载 canvas粒子demo
之前在codepen上看到了类似的效果，于是自己也使用coffee-script写了个相似的demo 效果：http://whxaxes.github.io/canvas-test/src/Particle-demo/blackhole/blackhole.html 源码：https://github.com/whxaxes/canvas-test/tree/gh-pag...
2015-04-11 09:19:00
93
转载 nodejs简易实现一下bigpipe
今天刚好看到bigpipe的文章，写个demo试一下：nodejs的实现：var fs = require('fs');module.exports = function(req , res){ //bigpipe测试 res.writeHead(200 , {'Content-Type': 'text/html;charset=utf-8'}...
2015-03-26 17:38:00
109
转载 gulp初体验记录(简介、插件开发介绍)
目前用的业界比较知名的三个前端构建工具：grunt、gulp、fis，自己此前一直都是只在用grunt，fis看过一点，gulp则一直都没注意过，直到最近发现好像用的人越来越多，所以今天也就抽了点时间尝试了一下。【什么是gulp】 比较官方的一句话就是：gulp是一种基于流的，代码优于配置的新一代构建工具。 gulp和grunt有点类似，但是从书写角度上来说，写gru...
2015-03-14 23:52:00
84
转载 nodejs学习之文件上传
最近要做个图片上传的需求，因为服务端春节请假回家还没来，所以就我自己先折腾了一下，大概做出来个效果，后台就用了nodejs，刚开始做的时候想网上找一下资料，发现大部分资料都是用node-formidable插件实现上传的。但是自己又想手动实现一下，所以就开始折腾了。写此博文也就是做个记录。 先大概整理一下整个思路，自己想要实现的效果是能够在页面上无刷新上传一个图片并且显示（后来...
2015-03-02 12:03:00
119
转载 Mustache.js前端模板引擎源码解读
mustache是一个很轻的前端模板引擎，因为之前接手的项目用了这个模板引擎，自己就也继续用了一会觉得还不错，最近项目相对没那么忙，于是就抽了点时间看了一下这个的源码。源码很少，也就只有六百多行，所以比较容易阅读。做前端的话，还是要多看优秀源码，这个模板引擎的知名度还算挺高，所以其源码也肯定有值得一读的地方。 本人前端小菜，写这篇博文纯属自己记录一下以便做备忘，同时也想分享一下...
2014-12-30 10:35:00
164
转载 html5 canvas 粒子特效
不知不觉就已经好久没写过博客了，自从七月正式毕业后，离开了实习了将近九个月的老东家，进了鼠厂后，做的事都是比较传统的前端活，之前在tpy的时候只管做移动h5的特效以及小游戏，再加上实习所以时间比较充裕，canvas玩的比较多，而现在因为工作都是些传统前端工作，而且也忙，就基本上没再写过canvas相关的效果了。这个博客自己只是想分享一些自己做过的一些好玩的demo，所以正经的那些项目...
2014-12-21 13:57:00
148
转载 linux上svn版本库创建小记
【新建svn仓库】先创建一个文件夹mkdir /opt/svn/wechat; 然后创建svn版本库 svnadmin create /opt/svn/wechat;【创建用户组权限】创建好后，创建用户组权限：打开/opt/svn/wechat/conf/authz文件，加上[grounps]team = xman,superman[/] (代表...
2014-08-08 15:44:00
73
转载 HTML5 实现橡皮擦的擦除效果
声明：本文为原创文章，如需转载，请注明来源WAxes，谢谢！ 最近项目刚好用到这种效果，也就是有点像刮刮卡一样，在移动设备上，把某张图片刮掉显示出另一张图片。效果图如下： DEMO请戳右：DEMO 这种在网上还是挺常见的，本来就想直接网上找个demo套用下他的方法就行了，套用了才发现，在android上卡出翔了，因为客户要求，在android不要求特别流畅，至少...
2014-07-17 10:11:00
209
转载 Web Audio API 实现音频可视化
声明：本文为原创文章，如需转载，请注明来源WAxes，谢谢！ 一转眼就已经有三个月没写博客了，毕业季事情确实多，现在也终于完全毕业了，博客还是不能落下。偶尔还是要写一下。 玩HTML5的Audio API是因为之前看到博客园里有关于这个的博客，觉得挺好玩的，所以就学习了一下。本文仅作为自己的学习记录。如有错误之处请指出。 最终的效果也就如右图，园友们可以自己去玩...
2014-07-14 15:38:00
290
转载 用javascript实现简单排序算法
声明：本文为原创文章，如需转载，请注明来源WAxes，谢谢！ 本文为楼主自己的学习记录文章，若有不当之处请斧正。 本文主要记录排序算法 【冒泡排序】 感觉这个是最简单的排序算法了。直接引用维基百科里的解释： 冒泡排序算法的运作如下：比较相邻的元素。如果第一个比第二个大，就交换他们两个。对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对。在这一点，...
2014-04-10 17:31:00
106
转载 简单酷炫的Canvas数字时钟
声明：本文为原创文章，如需转载，请注明来源WAxes，谢谢！ 我记得很早之前就看过这个DEMO，是岑安大大博客里看到的： 就是这个数字时钟，当时觉得这个创意不错，但是也没去折腾。直到昨天同事又在网上看到这个案例，他觉得很酷炫，就跑过来问我，这个是怎么实现的，然后我大概想了一下实现方法后也来了点兴趣，就花了一点时间模仿做出来了一个。不同的是，岑安用的是div来做的。...
2014-04-01 10:55:00
114
转载 Html5游戏框架createJs的简单用法
声明：本文为原创文章，如需转载，请注明来源WAxes，谢谢！ 楼主记忆力不好，最近刚好用了一下createJs框架，怕以后一段时间没用后会忘记，所以在此做个记录，或许以后用得着。 createJs网上的中文教程挺少的，以前UC有个Xcanvas的论坛有createJs的详细教程，但是随着XCanvas团队的解散，那个网站也关闭了。。网上的大部分都是非常基础的教程，有点千遍...
2014-03-27 18:30:00
132
转载 canvas学习笔记：小小滴公式，大大滴乐趣
声明：本文为原创文章，如需转载，请注明来源WAxes，谢谢！ 最近想弄一个网页，把自己学HTML5过程中做的部分DEMO放上去做集合，但是，如果就仅仅做个网页把所有DEMO一个一个排列又觉得太难看了。就想，既然学了canvas，那就来折腾下浏览器，做个小小的开场动画吧。 开场动画的效果，想了一会，决定用粒子，因为觉得粒子比较好玩。还记得以前我写的第一篇技术博文，就是讲文字...
2014-03-17 23:51:00
94
转载 = =用createJS写个flyppyPeople
声明：本文为原创文章，如需转载，请注明来源WAxes，谢谢！ 最近flyppybird很流行啊，今天中午闲着没事干，就用现有的素材写了个flyppyPeople，因为角色是个人，所以就叫People啦，哈哈 上链接：http://whxaxes.github.io/canvas-test/src/Game-demo/FlppyPeople/index.html。。。。。。...
2014-03-14 15:52:00
65
转载 HTML5+NodeJs实现WebSocket即时通讯
声明：本文为原创文章，如需转载，请注明来源WAxes，谢谢！ 最近都在学习HTML5，做canvas游戏之类的，发现HTML5中除了canvas这个强大的工具外，还有WebSocket也很值得注意。可以用来做双屏互动游戏，何为双屏互动游戏？就是通过移动端设备来控制PC端网页游戏。这样的话就要用到实时通讯了，而WebSocket无疑是最合适的。WebSocket相较于HTTP来说...
2014-03-07 12:06:00
165
转载 用canvas整个打飞机游戏
声明：本文为原创文章，如需转载，请注明来源WAxes，谢谢！ 之前在当耐特的DEMO里看到个打飞机的游戏，然后就把他的图片和音频扒了了下来。。。。自己凭着玩的心情重新写了一个。仅供娱乐哈。。。。。。我没有用框架，所有js都是自己写的。。。。。。所以就可以来当个简单的教程，对那些刚玩canvas的，或许能有些帮助，楼主玩canvas也不是很久，技术不是很好，请见谅哈。 闲话...
2014-03-05 18:04:00
196
转载 谈谈canvas的性能优化（主要讲缓存问题）
声明：本文为原创文章，如需转载，请注明来源WAxes，谢谢！ canvas玩多了后，就会自动的要开始考虑性能问题了。怎么优化canvas的动画呢？ 【使用缓存】 使用缓存也就是用离屏canvas进行预渲染了，原理很简单，就是先绘制到一个离屏canvas中，然后再通过drawImage把离屏canvas画到主canvas中。可能看到这很多人就会误解，这不是写游戏里面用...
2014-02-25 18:02:00
1944
转载 用canvas写个接水管小游戏
声明：本文为原创文章，如需转载，请注明来源WAxes，谢谢！ 过年的十八天假期迷迷糊糊一下子就过去了（LZ还是实习生，鉴于大学最后一个寒假了，所以就多请了好多天假），又要返工上班了。这是年后的第一篇博客了。其实就是水一下，毕竟不能冷落博客太久啊。 这两天刚好抱着玩的心情写了个接水管游戏，本来用css3更容易写。。。就旋转那些东西，不过因为LZ比较喜欢canvas的写法，所...
2014-02-17 15:39:00
405
转载 要过年啦，用canvas做了个烟火效果
声明：本文为原创文章，如需转载，请注明来源WAxes，谢谢！ 要过年了，过年想到的就是放烟火啦。。。。于是就用canvas写了个放烟火的效果，鼠标点击也会产生烟火，不过不要产生太多烟火哦，一个烟火散出的粒子是30到200个之间，当页面上的粒子数量达到一定的时候，页面就会很卡咯，我也没特意去优化神马的。以后有空再说吧。 直接上DEMO吧：放烟火 原理很简单。。。就...
2014-01-23 17:54:00
422
转载 用Canvas玩3D：点-线-面
声明：本文为原创文章，如需转载，请注明来源WAxes，谢谢！ 玩Canvas玩了有两三个礼拜了，平面的东西玩来玩去也就那样，所以就开始折腾3D了。 因为Canvas画布终究还是平面的，所以要有3D就得抽象出一个Z轴。然后再把3D坐标转换成2D坐标，画到画布上，再通过旋转等变换效果来产生3D感。做3D一般就是由点到线，然后由线到面。 【点】 点的话，之前我有写过...
2014-01-22 12:19:00
234
转载 用Canvas写桌球游戏！！！
声明：本文为原创文章，如需转载，请注明来源WAxes，谢谢！ 昨天上班的时候闲着无事，就用Canvas写了个桌球游戏来玩玩。。。。所以就拿这游戏上来水一发。或许对一些刚学canvas的人有帮助。 话说这只是一个简单的DEMO。游戏性，游戏规则什么的我都没怎么考虑，如果有兴趣细化的朋友可以细化一下，比如细化一下规则，游戏开关，加个声音，细化一下进球检测，更严谨甚至可以去查下...
2014-01-18 11:14:00
646
转载 聊聊用CSS3来玩立方体
声明：本文为原创文章，如需转载，请注明来源WAxes，谢谢！ 虽然现在很多浏览器都还不支持css3的3D转换，不过估计也已经有很多人都有玩css3的3D了。。。。。。所以我这篇也就相当于水一下了，哈哈。 用css3写3D立方体用到的属性不多，就那么几个：perspective，transform-style，以及transform。目前来说能完美支持3D的好像就只有chr...
2014-01-15 10:32:00
71
转载 简单的运动学，用canvas写弹力球
声明：本文为原创文章，如需转载，请注明来源WAxes，谢谢！ 跟之前的随笔一样，因为本人仍是菜鸟一只，所以用到的技术比较简单，不适合大神观看。。。。。。 学canvas学了有一个多礼拜了，觉得canvas真心好玩。学canvas的人想法估计都跟我差不多，抱着写游戏的态度去学canvas的。所以运动学啊、碰撞检测啊、一些简单的算法神马的是基础啊。以前没做过游戏的我学起来还真...
2014-01-10 11:08:00
203
转载 用Canvas做视频拼图
声明：本文为原创文章，如需转载，请注明来源WAxes，谢谢！ 几天前同事给我看了一个特效，是一个拼图游戏，不同的是，拼图里的是动画。他让我看下做个DEMO，于是就自己整了一会，也确实不难。用canvas很容易做。所以这篇博文不适合高手看。。。。就是随便写来玩玩的。 效果图：。。。至少我刚看到这个的时候觉得挺新颖的，所以才会想到做出来玩玩，觉得楼主out的哥们请轻喷 ...
2014-01-07 17:27:00
124
转载 解析3D标签云，其实很简单
声明：本文为原创文章，如需转载，请注明来源WAxes，谢谢！ 最近开始用canvas搞3D了，搞得也是简单的东西，就是球体转圈。做出来后，突然想起以前看过的3D标签云，在以前觉得真心狂拽酷炫叼啊，当时也确实不知道怎么在平面上模拟3D，所以也就没去搞了。现在刚好用了canvas搞3D，也发现，好像3D标签云也差不多，然后就写了一下。 具体怎么做呢，先说一下原理，3D标签云就...
2014-01-02 10:25:00
73
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人