岑安 - 博客园

[置顶] 【自己给自己题目做】之一：椭圆可点击区域

摘要：【题一】请实现以下需求，要做一个活动页面，页面上有一张图片（假设是800x600），图片正中心有一个椭圆形的可点击区域，假设椭圆长轴为200px（横向），短轴160px（纵向），请实现点击这个椭圆区域弹出“我被点击了”的字样，而其他区域点击无效。（不一定要兼容低端浏览器，能兼容当然更好）我说这是我曾经出过的一道笔试题。其实主要考察点是基本的数学能力和用web前端相关知识实现需求的综合能力。难度不算太大。用普通的dom或者canvas来实现都ok，因为其实重要思路是一致的。椭圆区域还是要自己判断。先看demo后讲思路：demo:http://hongru.github.io/quiz/1/ind 阅读全文

posted @ 2013-07-13 14:57 岑安阅读(3923) 评论(8) 推荐(2) 编辑

[置顶] 我在想，技术博不能荒废

摘要：看看，大概都半年没有更新博文了。好惭愧啊。应该鞭笞...我觉得我还是应该拾起来。为时不晚...然后我就想如果我继续写下去，写什么样的主题和内容会更好呢？又能是大家感兴趣的，又能是对我和别人都有帮助的..于是我决定写一个系列，按我的方式解答一些所谓的“前端面试题目”（大草原的除外 :( ）。我觉得应该好多同学会感兴趣。当然问题抛出来我自己不会或者出错也不失为一个看点。哈哈 :)为了督促自己，立贴为证，哦不，立文为证。已是深夜，所以我先抛出一期的两个问题，一个是我自己曾经用过的一个面试题（比较简单），一个是来源于这周跟同事讨论的一个小需求（比较复杂，我觉的值得拿来做笔试题目）...【题一】请实阅读全文

posted @ 2013-07-13 01:06 岑安阅读(2362) 评论(7) 推荐(1) 编辑

[置顶] About me [my way]

摘要：就要除夕了。假日的到来，心情瞬间就闲适了下来。早早上了床，看看电脑还有30%的电，想到一些事情，顺带纪录一下吧。今年坚持上班到了除夕的前一天，爸妈来工作的城市陪我过年了。感谢他们。前几天就已经看帖子有说仍在上班的人都是屌丝，我今天自嘲一下，说我这种冒雪上班到旧年最后一天的人不是极品屌丝？开个玩笑：）今天有些触动，就给大家说下我的学习经历吧。可能对好多人来说并没有什么价值，我主要想要表达的意思是“不要太急，任何一个人都是从不懂到懂的。只要坚持做下去就好”。这句话给园子里不够自信的朋友们，也说给我自己。所以，title就定个 About me，about my way。我是10年本科毕业的，到如阅读全文

posted @ 2013-02-08 22:54 岑安阅读(7365) 评论(11) 推荐(11) 编辑

[置顶] 半年拾遗

摘要：惭愧，上一篇blog发表时间是12年8月份，现在已经13年2月份了。唉... 此处省略1w字。半年有余，blog一直闲置了。但是闲置并不代表忘记。时不时还是会敲开cnblogs的域名胡乱逛逛。马上年关了，公司里该回家的人基本不是准备回家就是在回家的路上。年前该忙的事情忙的差不多了，该做的项目也做的差不多了。顺手记点东西吧。表示我并木有忘记这里 :)既然是技术博，个人总结，感想之类的还是就免了。就算总结也要总结的跟技术沾沾边不是 :)【关于Web App】咋们现今说的web app，现阶段亦可简要定义为OPOA，或者再详细一点是经由路由（hash）驱动的OPOA，单页应用。开发这种类型的应用，阅读全文

posted @ 2013-02-06 15:27 岑安阅读(8841) 评论(17) 推荐(13) 编辑

[置顶] context2D上的texture mapping

摘要： [来自：]http://www.alloyteam.com/2012/08/texture-mapping-on-context2d/我们在做一些图像变换或者3D建模时，骨架或者网格的“蒙皮”是少不了的。在webGL中，也就是“experimental-webgl”的context中，webGL跟openGL一样，提供了一个非常方便的JavaScript1gl.bindTexture接口，可以很容易的对某一个指定的面或者网格蒙上指定的素材。并且，被蒙皮的区域做矢量变换，3d rotate之类的，texture会自动随着变换。不用额外的做处理。所以在webGL中，textureMapping是十阅读全文

posted @ 2012-08-22 15:18 岑安阅读(1467) 评论(1) 推荐(0) 编辑

[置顶] Animations In Canvas

摘要：提前发布于：http://www.alloyteam.com/2012/08/animations-in-canvas/关于Canvas中动画的处理和实现大致会有三种类型：矢量动画【No Textures】关键帧动画骨骼动画这里先分别做一个浅析。都会做一个大致的介绍，这篇文章暂不会涉及深入的技术细节。【矢量动画】顾名思义，这里暂且把不用素材，只用一些矢量的绘制就能达到的动画效果归为矢量动画。矢量动画，个中有很多很多的例子，比如一些粒子效果啊，矢量线条的特效，或者一些3D的矢量特效等等。应该可以说矢量的效果是其他效果制作的基础，而且它能完成一些通过素材达不到的效果，尤其是在处理或者演示一些数学模阅读全文

posted @ 2012-08-22 15:17 岑安阅读(2874) 评论(6) 推荐(2) 编辑

[置顶] 【NodeCC】nodejs版本的脚本压缩和compo工具

摘要：对于前台开发而言，为了降低文件大小，js文件和css文件的压缩和组合几乎是默认的规矩。我们利用YUI Compressor 和 google Compiler 可以很容易的完成文件的压缩。甚至 yui compressor 本身都已经支持多文件的批量压缩。但是，为了更好的处理这些机械化的事情，我们通常还是需要脚本来辅助，让这些工作可以更好的自动化，可配置化。网上有很多类似的脚本工具，或者有的也已经编译成了可视化的工具来使用。我自己以前也写过python版本的，也用过同事写的类似的脚本，基本也都是python版本的。鉴于大多数前端的攻城师们对js更为熟悉，所以，这里也提供一个简易的nodej 阅读全文

posted @ 2012-05-28 23:02 岑安阅读(3534) 评论(3) 推荐(3) 编辑

[置顶] 基于【双密度松弛算法】的二维流体粒子模拟

摘要：以技术预研的心态做的一个东东。基于【双密度松弛算法】目前来看应用价值不大，更多的是扩展一些思路，扩大前端方向，或者说是js能做的事的范围。大家路过围观一下就好。源码不多，托管在github/hongru/fluid上，感兴趣的可以大致看一看。很早以前自己也做了个类似的，不过那个算法没有理论依据，自己瞎想的。离开了html5，面对“流体力学”，我只能旁观了...。【实现的思路】最关键的还是【双密度松弛算法】的实现。具体的算法可以参考文献和资料：http://wenku.baidu.com/view/2d53091b6bd97f192279e95e.htmlhttp://www.iro.um 阅读全文

posted @ 2012-05-23 22:16 岑安阅读(3066) 评论(1) 推荐(3) 编辑

[置顶] 为什么我推荐事件委托而不是批量绑定

摘要：太长时间没写blog了，最近迷迷糊糊，又到一个周末，为了给自己一个交代，还是尽力记录点东西吧。免得哪天失忆想回去找资料都没地方找了。今天要记录的东西很简单，就是事件委托。我相信但凡一个做前端方向的，甚至不是前端方向的编码者，对于dom元素的事件委托应该都了解了。所以今天不是说“事件委托”是什么？而是说为什么需要它。【基于前端模版的开发】我们先说这个，为什么要先说这个呢，因为事件委托在这种模式下显得比较有价值。前端模版-相信大家也都耳熟能详，玩的很溜了。web的越来越多的工作开始移交到前端来做。其中就包含这一个东西。当然，我们今天也不讨论前端模版的优势。而是要看接下来使用过程中可能遇到的一些问题阅读全文

posted @ 2012-05-20 22:55 岑安阅读(4182) 评论(4) 推荐(4) 编辑

[置顶] 关于简单的碰撞检测

摘要：【前言】这篇博文旨在给自己做个记录和备忘，同时希望也能给有这方面简易碰撞模型需求的同学一点点参考价值。【关于像素级别检测】前一阵有同学问我说能否做到像素级别的碰撞检测，做过类似碰撞检测的同学应该清楚，按照我们最常规的想法，假如要检测一个运动的物体和一条线之间是否有碰撞，最简单的判断条件，就是看当前帧，这个物体的位置，是否超过的我们的界定范围...但这样简单的判定确实是有问题的，我们举一个实际一点的例子。假如小球从 a 点向 c 点的方向落下。外面的黑框为我们所示的边界，那么，我们想要小球在碰到边界的时候反弹... 那么我们该怎么做呢？可能有同学会迫不及待说了，这还不简单，一个条件语句搞阅读全文

posted @ 2012-03-31 23:41 岑安阅读(13352) 评论(18) 推荐(13) 编辑

[置顶] 事情没有想象中那么难--JX官网首页3D粒子效果

摘要：上周为AlloyTeam/JX做了个简单的官网http://alloyteam.github.com/JX/，当时文档，demo以及其他的附属工具都还没完善，地址就流了出去...独立的粒子特效demo 可以看这里http://hongru.github.com/proj/laro/examples/jxhome/JX 作为webqq的底层，框架本身怎么样，我这里暂时不作评论，很多同学对JX官网home页的opening动画的实现很感兴趣，我这里就简单说一下实现的思路。应该没有大家想象中麻烦。【关于canvas的使用】home页的粒子效果其实是受启发于 Google 2011年的I/O 大会的阅读全文

posted @ 2012-03-28 00:43 岑安阅读(16810) 评论(22) 推荐(18) 编辑

[置顶] 【Laro】- About Game Engine

摘要：经过断断续续折腾。关于html5 canvas 的一个游戏引擎的底层框架部分大致完成了。现在是version 0.1，还有很多不完善的地方，或者是bug。亦或设计不合理的地方。我把地址放出来，正好我看院子里也有些同学写html5 的小游戏或者游戏引擎。感兴趣的同学可以大家互相交流一下，互帮互助，一起成长。关于Laro ，放在github上https://github.com/hongru/Laro或者https://github.com/AlloyTeam/Laro都可以看到源码。感兴趣的同学，或者有好的意见建议的同学可以在上面留言。互相交流。如果说是游戏引擎，目前还仅仅完成了30%- 阅读全文

posted @ 2012-03-16 23:13 岑安阅读(1370) 评论(4) 推荐(1) 编辑

[置顶] 【前端应该知道的那些事儿】运动学基础

摘要：【写在前面的话：】前不久刚看到过一句话：说好的技术文章应该让读者感觉增加信心，而不是失去信心。有感于这句话是因为以前觉得发一些貌似高深的，看起来nb的东西才算一篇好博文，可是多少有点炫技的成分。可是后来越发觉想把一个看起来简单的问题说通透也着实不易。我希望今后的文章多少能带给更多的读者一些帮助吧。这是我的目标之一。web前端，确实算编码里面的挺特殊的一个职位，不仅仅要理性的编码，还要感性的接触UI，通常我都把这种工作叫做需要情商的码字工作者。要说前端有多难，我想会被很多做算法或者底层的同学所不齿。确实，前台的工作并不算难，尤其是web端的前台，有困难的部分，那也是少数。所以在互联网发展初期，阅读全文

posted @ 2012-03-16 20:41 岑安阅读(10683) 评论(46) 推荐(36) 编辑

[置顶] 每天出门前，记得提醒自己一遍，别落下了梦想

摘要：好久没有更新blog了。今天终于有了心再写一篇。算是对自己工作和生活的一种回顾吧。11年底和12年初的时候自己都没有写什么总结性质的博文，或者之类的东西。但是心里确是有稍微对过去的时间做一点结算工作的。【关于个人】过去差不多一年的时间里。做的事情不多，但是其实也不少。我这里都可以大概列出除了日常在公司工作之外自己在业余为自己专业提升而做的事情。在自己的github上面，去年有不少更新。主要的工作集中在3个较为大的项目上面。一个是自己一点一点累计起来的关于javascript的基本lib。取名叫做Leta,内容倒没什么特别值得说的，都是根据工作经验和工作需求累积起来的关于前端工作的基本脚本库。当阅读全文

posted @ 2012-02-26 00:19 岑安阅读(3638) 评论(19) 推荐(10) 编辑

[置顶] canvas保存为data:image扩展功能的实现

摘要：【已知】canvas提供了toDataURL的接口，可以方便的将canvas画布转化成base64编码的image。目前支持的最好的是png格式，jpeg格式的现代浏览器基本也支持，但是支持的不是很好。【想要的】往往这么简单直接的接口通常都满足不了需求。我想要的不仅是简单的通过画布生成一个png，我不想新开一个tab，然后还要右键另存为...我还需要更方便的自由的配置生成的图片的大小，比例等。另外如果我还要别的图片格式，比如位图bmp，gif等怎么办...【解决办法】a)想直接把图片生成后download到本地，其实办法也很简单。直接改图片的mimeType，强制改成steam流类型的。比如‘ 阅读全文

posted @ 2012-01-14 20:27 岑安阅读(23756) 评论(7) 推荐(5) 编辑

[置顶] 关于base64编码的原理及实现

摘要：我们的图片大部分都是可以转换成base64编码的data：image。这个在将canvas保存为img的时候尤其有用。虽然除ie外，大部分现代浏览器都已经支持原生的基于base64的encode和decode，例如btoa和atob。（将canvas画布保存成img并强制改变mimetype进行下载，会在下一篇记录）但是处于好奇心，还是驱使我去了解下base64编码的原理。以便也在不支持原生base64编码的ie下可以得以实现。【Base64】-base64的编码都是按字符串长度，以每3个8bit的字符为一组，-然后针对每组，首先获取每个字符的ASCII编码，-然后将ASCII编码转换成8b 阅读全文

posted @ 2012-01-14 11:47 岑安阅读(54388) 评论(17) 推荐(20) 编辑

[置顶] 追踪子弹-初中简单的物理和数学

摘要：飞行射击类游戏很常用的追踪子弹，或者塔防里面固定炮台打怪物的时候，为了保证子弹不会打空，追踪是必要的。然而，这是极其简单的事情。在每一帧里判断当前子弹和目标位置的距离和方向，不断修正速度方向即可。// this.x, this.y 表示当前子弹的位置// this.tar.x, this.tar.y 表示当前目标的位置var dis = Math.sqrt(Math.pow((this.tar.x-this.x), 2) + Math.pow((this.tar.y - this.y), 2));var angleX = (this.tar.x - this.x)/dis;var angl 阅读全文

posted @ 2012-01-10 15:33 岑安阅读(2097) 评论(11) 推荐(1) 编辑

[置顶] 【备忘】指定为同名callback的jsonp && IE下script loaded状态标记

摘要：【已知】不知道大家有木有了解过jQuery1.0到2.0时候针对jsonp那一块的修改。v1.0的时候还在使用iframe作为请求数据的临时暂居地。以便让过往数据有据可查。保证了jsonp请求的时候即便用了同样的全局callback 也只至于先返回的数据丢失，造成数据污染的问题。但是自从jq2.0之后，就不再采用iframe来记录jsonp获得的数据了。可是依然，不得不支持同一个callback名。那么，这样，问题就来了...【问题】jsonp的原理其实就是我们把请求地址当作一个js地址以script tag 的方式插入到页面，把服务端返回的数据当作script 脚本来运行以获得所需的数据（通阅读全文

posted @ 2011-12-27 11:56 岑安阅读(3335) 评论(0) 推荐(3) 编辑

[置顶] 【备忘】bounce ease

摘要：偶尔会用到弹簧类似的缓动效果，就是不是直接从 A点缓动到B点，而是从A点出发，但是到最终停在B点之前，会以阻尼的方式在B点来回若干次。类似弹簧一样。其实已有 bounce ease 的算法公式，比如：Bounce: { easeIn: function(t,b,c,d){ return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b; }, easeOut: function(t,b,c,d){ if ((t/=d) < (1/2.75)) { return c*(7.5625*t*t) + b; } else if (t < (2/2. 阅读全文

posted @ 2011-12-22 21:58 岑安阅读(903) 评论(7) 推荐(0) 编辑

[置顶] 逐帧动画 and 有限状态机（fsm）

摘要：【逐帧动画】其实就canvas而言，和flash有太多相似的地方。最直接的一点：比如把一个object从a点移动到b点。并不是直接去改变object的位置，而是把a点的object擦掉，在b点重新画一个。这其实和我们儿时喜爱的动画原理一致的。电视机里播放的好看的动画，早期都是由我们的动画制作者一帧一帧画出来的。一秒30帧或者其他数。快速的转变欺骗我们的眼睛。如今的web动画，尤其是web Game一块，因为大量复杂绚丽的原因，简单依靠底层矢量的绘制基本已经不能满足需求。更多的，或者说更实际可用的是怎么把一张张图片资源连接到一起变成动画的方法。dom里面background 本身支持backgr 阅读全文

posted @ 2011-12-04 19:28 岑安阅读(4071) 评论(5) 推荐(4) 编辑

【自己给自己题目做】之一：椭圆可点击区域