飞行射击类游戏很常用的追踪子弹,或者塔防里面固定炮台打 怪物的时候,为了保证子弹不会打空,追踪是必要的。
然而,这是极其简单的事情。
在每一帧里判断当前子弹和目标位置的距离和方向,不断修正 速度方向即可。
我们的图片大部分都是可以转换成 base64 编码的 data:image。 这个在将 canvas 保存为 img 的时候尤其有用。虽然除 ie 外,大部分现代浏览器都已经支持原生的基于 base64 的 encode 和 decode,例如 btoa 和 atob。(将 canvas 画布保存成 img 并强制改变 mimetype 进行下载,会在下一篇记录)
但是处于好奇心,还是驱使我去了解下 base64 编码的原理。以便也在不支持原生 base64 编码的 ie 下可以得以实现。
【已知】
canvas 提供了 toDataURL 的接口,可以方便的将 canvas 画布转化成 base64 编码的 image。目前支持的最好的是 png 格式,jpeg 格式的现代浏览器基本也支持,但是支持的不是很好。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
var CustomEvent = { events:{}, dispatchEvent:function(ev,data){ if(this.events[ev]){ var handlers=this.events[ev]; for(var i=0,l=handlers.length;i<l;++i){ try{ handlers[i](data); } catch(e){ } } } }, addEventListener:function(ev,handler){ if(!this.events[ev]){ this.events[ev]=[handler]; } else{ this.events[ev].push(handler); } }, removeEventListener:function(ev,handler){ if(this.events[ev]){ var handlers=this.events[ev]; for(var i=0,l=handlers.length;i<l;++i){ if(handlers[i]==handler){ handlers.splice(i); break; } } } } } |
过去在网页上播放声音一般使用 wmp(windows media player)控件,但是 wmp 控件提供的 js 接口非常有限,更致命的是 IE only。如果不想接受 wmp 的界面,又或者想要跨平台,只能借助于 flash 了。现在 html5 标准已经原生支持音频播放,并且各大浏览器都不同程度地实现了。
文本溢出展示省略号的需求经常都会用到,而对于新式的浏览器,这完全不是问题,因为 css3 里面已经有实现 text-overflow:ellipsis,但是最新 w3c 文档中却移除了这个属性,即使这样,也有不少浏览器实现了这个特性。其浏览器支持情况如下:
1 2 |
IE Firefox Opera Safari Chrome 6+ - 11.0+ 3.0+ 1.0+ |
可以看到,只有 firefox 和 opera11 一下的版本不支持这个浏览器,以此也可以放心大胆的用了。但是遇到要求高的产品经理时(╮(╯_╰)╭),就不得不考虑 firefox 等不支持的浏览器了,唯有使用 js 进行字符截断。
比较简单的截断方式就是按字符个数截断,以一个中文宽度等于两个英文宽度为前提,根据给定字符个数进行截取。但是字符在页面显示的时候,其宽度并不是一定的,会根据不同的字体和字体大小的不同而不同,更何况字母 i 和 A 的宽度是不一样的,存在 bug 且不够精确。
Copyright © 2011-2021 AlloyTeam. All Rights Reserved. Powered By WordPress
粤ICP备15071938号-2