当谈到 HTML5 Canvas 时，你通常会听到关于让它在传统浏览器上运行的库、像离屏 Canvas 这样的性能技巧，以及绘制和动画化精灵和瓷砖的方法。但这只是 Canvas 的一部分。在最底层，Canvas 是一种用来操纵屏幕一部分像素的方法。无论是通过绘画 API 还是直接操纵像素数组（顺便说一下，这是一个 类型化数组，因此性能非常出色）。

利用这些知识，我认为创建一个我曾在平板电脑广告中看到的小游戏会很有趣：一款简单的小游戏，可以让孩子们画字母。结果是针对 FirefoxOS 的一个演示，名为 Letterpaint，它很快将在 应用商店 上线。代码在 GitHub 上。

构建 Letterpaint 的有趣之处在于我走了一些捷径。在画布上绘画很容易（使用 Jacob Seidelin 的 Canvas 速查表 会更容易），但乍一看，确保用户停留在特定形状内很棘手。找出字母的填充程度也是如此。但是，通过重新将 Canvas 看作像素集合，我找到了一个简单的方法来实现这一点。

• 当我绘制字母时，我会读取具有字母颜色的像素数量。
• 当你点击鼠标按钮或触摸屏幕时，我会测试当前鼠标/手指位置的像素颜色。
• 当像素不是透明时，你就在字母内部，因为默认情况下，主画布是透明的。
• 当你释放鼠标或停止触摸屏幕时，我会将油漆颜色的像素数量与字母的像素数量进行比较。

很简单，不是吗？所有这些都可以用两个可重用的函数实现。

/*
  getpixelcolour(x, y)
  returns the rgba value of the pixel at position x and y
*/
function getpixelcolour(x, y) {
  var pixels = cx.getImageData(0, 0, c.width, c.height);
  var index = ((y * (pixels.width * 4)) + (x * 4));
  return {
    r: pixels.data[index],
    g: pixels.data[index + 1],
    b: pixels.data[index + 2],
    a: pixels.data[index + 3]
  };
}

/*
  getpixelamount(r, g, b)
  returns the amount of pixels in the canvas of the colour
  provided
*/
function getpixelamount(r, g, b) {
  var pixels = cx.getImageData(0, 0, c.width, c.height);
  var all = pixels.data.length;
  var amount = 0;
  for (i = 0; i < all; i += 4) {
    if (pixels.data[i] === r &&
        pixels.data[i + 1] === g &&
        pixels.data[i + 2] === b) {
      amount++;
    }
  }
  return amount;
}

在里面添加一些绘画函数，你就完成了游戏。你可以在 网上查看一步一步的指南（以及 从 GitHub 获取代码），还有一个关于技巧和决定的屏幕截图 在 YouTube 上。

这里要记住的最重要的事情是，使用库和工具来快速完成事情非常诱人，但这可能意味着你思考得过于复杂。浏览器为我们内置了非常强大的工具，在很多情况下，这意味着你只需要保持更新，并大胆地尝试一些“新”的东西，这些东西都是开箱即用的。