有谁还记得边城浪子吗？有谁还记得闪客帝国吗？感觉这是个暴露年龄的问题。

记得我初中那会有了台自己的电脑。然后用猫上网挂着，以可怜的下载速度，用网站抓取软件下载闪客里的Flash小游戏到本地。当然，一到每月话费结算的时候，都少不了家长的一顿揍。

在知乎上看到边城浪子创建了独立游戏社区独立精神，上去看了下，原创和翻译的文章都很赞，而且有很多在线的js动画，能很好的展示相关算法。搞的我也心痒痒想学下js。

刚好网站上有篇pixi.js 初步介绍，看着也挺简单，打算在自己Hexo搭建的这个博客上也用上pixi.js。

遇到这么几个问题，希望对大家有用。

  • 教学文章里创建canvas用的方法是：

    <script>
var renderer = PIXI.autoDetectRenderer(800, 400, {backgroundColor : 0x1099bb});
document.body.appendChild(renderer.view);
</script>

    如果你要指定canvas的话，可以这样：

    <body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById("canvas");
var renderer = PIXI.autoDetectRenderer(800, 400, {view: canvas});
</script>
</body>

  • 对canvas不能进行getContext

    var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

    我发现getContext之后就绘制不出来了，别问我原因，我js是菜鸟。

  • 要在HTTP服务器环境下运行，直接在本地打开HTML文件是没法使用的。

    比如打开链接file:///D:/source/static/pixitest.html，当创建Sprite的时候，指定img资源路径console显示不能跨域操作。

  • HTML文件放在某些目录下会被Hexo转换掉。这就需要设定忽略目录，在Hexo的_config.yml里配置如下：

    skip_render: 
  - '_drafts/**'
  - 'static/**'

  • 我现在是用iframe方式嵌入。可能是因为我主题的缘故，在md里定义了一些CSS和Script后，显示会出现错乱。用iframe的方式比较独立单纯些，不会跟主题本身的一些定义混杂。

下面窗口的这个例子，大家可以直接跳转到pixitest.html去查看源码。