浅析HTML5 Canvas的几种中文字体缩小方案

Canvas留下的坑远比我想象中的要多, 最近碰上一个很少见的需求——在Canvas上绘制大小小于12px的文字. 如果只是简单的去设定context的font属性, 来绘制点阵字体, 比如7px的宋体, 出来的效果是这样的(Chrome): 正如你看到的, 这显然不是7px, 如果你再次访问font属性, 就会发现font被强制改回了12px大小. 我们知道, Chrome早在2年前就限制了中文字体的最小尺寸为12px, 但令我没想到的是, Canvas竟然也享受同等待遇. 在Photoshop CS6里, 7px的宋体是这样的: 虽然从辨识度的角度来说很差, 但实际上这才是我想要的结果. Google查了一圈回来, 也只能找到像"-webkit-text-size-adjust"(文字字体大小限制, 该CSS属性在Chrome »


Web Components内联脚本的批量CSP处理

说在前面, 此CSP为Content Security Policy, 并非CS里的Communicating sequential processes. 这几天脑抽想把Polymer做的东西运用到Chrome App上, 通读了一遍Chrome App的官方教程后, 发现Polymer官方的Web Components普遍使用了内联脚本(Inline script), 这就违反了Chrome App遵循的CSP策略, 基本都不能直接在Chrome App里使用. 可我又能怎么办呢? Web Compoents这么多, 总不能一个一个的去手动修改. Google之后发现, Polymer官方早就想到了这个问题, 自家生产的库不能在自家的平台上运行, »


Xiami HTML5 Embed Player v0.2 发布

Xiami HTML5 Embed Player是在Chrome 上实现的虾米音乐 HTML5 播放器, 其最终目标是彻底替代虾米音乐网的Flash播放器功能, 若日后虾米网提供了自己的PC Web端HTML5播放器, 该项目将停止开发. v0.2版本完善了电台播放器的界面, 并修复了部分bug. Xiami HTML5 Embed Player v0.2 的源代码及 crx 安装文件: http://pan.baidu. »


Chrome上的虾米音乐Web端HTML5电台播放器: Xiami HTML5 Embed Player v0.1 发布

Xiami HTML5 Embed Player v0.2已发布 Xiami HTML5 Embed Player是通过Polymer和Traceur这两个Google主导的JavaScript库在Chrome上实现的虾米音乐HTML5播放器, 其最终目标是彻底替代虾米音乐网的Flash播放器功能, 若日后虾米自己提供PC Web页面的HTML5播放器, 该项目将终止开发. Xiami HTML5 Embed Player的图片资源是通过Google Swiffy工具转换虾米的swf文件后得到的. 由于时间仓促, v0.1版本仅实现了电台部分的HTML5播放功能, 完整的播放功能有待本人后续补完. Xiami HTML5 Embed »


HTML5 刮刮卡效果source-atop实现

2年前我写了《HTML5 Canvas 可刮涂层效果》, 现在才知道, 我不经意间写的代码竟然有不少人在借鉴和使用, 这还是我今天搜索怎么实现刮刮卡效果的时候发现的……由于是我自己的代码, 一些分析我代码的帖子虽然把代码改了一部分, 但我当时的编码习惯还是很容易辨认出来. 今天写这篇文章的目的, 是为了终结我2年前写的destination-out刮刮卡实现方法, 因为有不少人反映三星手机不能使用, 可我又没有三星手机, 怎么调试? 后来一位游客给了我一个他说可以用的代码, 我看了看, 是使用source-atop合成多个canvas实现的. 今天我用自己的代码把source-atop的实现方法写一下. 也避免各位新读者在文章里留言问我要源码, 如果在部分三星手机中还是不能实现, 那我也没辙了. 当然, 我并不认为source-atop的方法比destination-out要高明, 因为source-atop需要使用3个canvas才能实现的功能, destination-out只用一个canvas就能实现了, »


KamiGami カミガミ 线上Galgame平台开放免费体验测试

KamiGami是台湾百臂網路科技股份有限公司的一个游戏开发平台, 与其他游戏平台/引擎不同的是, KamiGami使用HTML5作为开发技术, 从一开始就是一个跨平台的游戏解决方案: 通过KamiGami Engine开发的游戏可同时运行于PC, Mac, iOS, Android等支持HTML5的平台. 从官方的说明中我们可以了解到, KamiGami是一个主打Galgame的游戏引擎. “用HTML5做Gal啊, 我也想过”, 想象是容易的, 实现是困难的, 其实早在2、3年前, 就有人开始着手基于HTML5的Galgame游戏引擎, 但要么是没有得到游戏开发者的认同和支持, 要么就是引擎完成度不高或者授权协议的问题, 不能投入商用. 这些死去的Galgame HTML5引擎没做到的, KamiGami做到了, 并且其线上Galgame平台也在正在建设. »


硬件加速! X-Canvas VS Sphinx 移动平台新的恶战

Opera最近的动作不少,先是逐步将内核换为Webkit,现在又要推出HTML5全硬件加速的游戏引擎Sphinx,试图引发一场HTML5游戏的革命. Opera在MWC上发布的Sphinx引擎宣称速度会比在Chrome上运行快2-3倍,比传统浏览器运行快5倍,并且兼容多种现有HTML5游戏引擎. 然而就在Sphinx的消息刚刚放出的第二天,Opera的中国死对头UC放出消息,将发布高性能HTML5游戏引擎X-Canvas,基于OpenGLES硬件加速,并声称X-Canvas可以在30-60的FPS下同屏幕运行1000个Sprites,同时兼容多种JS游戏库. 这无疑将会导致Opera和UC开始一轮新的用户争夺大战,同时开发者们也必须做出选择,以目前国内的环境来看,UC的X-Canvas应该会更受欢迎,但Opera的本地化版本欧朋浏览器也不容小觑. UC宣称X-Canvas还会提供客户端打包服务,这意味着游戏可以作为端游运行,而Opera目前还未放出类似消息.从国内开发者的立场来看,UC的X-Canvas有着良好的环境,除非Sphinx真的有过人之处,否则恐怕很难动摇X-Canvas今后在国内开发者心中的地位了. 究竟选择哪一方, »


Super Sync Sports 超同步运动:用移动设备作为手柄玩Chrome游戏

Chrome近日推出了一款名为Super Sync Sports的HTML5体育游戏,玩家可以进行跑步,自行车,游泳竞赛,且支持多人游戏. 这款游戏最大的亮点在于它不是用电脑来控制,而是把你的触屏移动设备当作手柄来用,玩这款游戏需要你拥有一个搭载Android 4.0或者iOS 4.3以上系统的手机或者平板,PC上的Chrome则需要15版本以上. 快来玩玩吧:http://www.chrome.com/supersyncsports/ PC端截图 手机端截图 »


HTML5实例教程:圣诞彩蛋(六)

这是该系列教程的最后一篇了. 最后我们完成的是上传文件和访问指定图片的功能,由于内容简单并没什么好说的,所以直接放出完整的源代码了. 其实还可以加上图片的缩放功能,不过这部分就作为留给读者们的作业吧(其实是我自己不想写啦). 完整代码index.php: <!DOCTYPE html> <html> <head> <meta charset='UTF-8'/> <title& »


HTML5实例教程:圣诞彩蛋(五)

添加Alpha值和Lock锁以完成动画效果 要完成淡入淡出的动画,需要使用到Alpha值来修改透明度,使用Lock来”锁”住动画时鼠标移动触发的事件. 在第三节中我们已经实现了512px圆到256px圆的动画,现在我们要将它移植到新的通用函数上. 首先我们要修改circleData的格式: function circleData(cX, cY, cR, Px, Py, r2, a, lock) { return { 'circle': { 'x': cX, 'y': cY, 'r': »