Canvas

首先要了解的是，canvas 是 HTML 5 规范中的一个新元素。要开始在 canvas 上绘图，你需要获取它并检索一个特定的上下文——可以是 2d 或 webgl。

var canvas = document.querySelector('canvas'),
    ctx = canvas.getContext('2d');

然后，你就可以开始在画布上绘制、填充和描边图形和文本了。下面是一个在画布上绘制简单正方形的示例。

<canvas></canvas>

<script>
    var canvas = document.querySelector('canvas'),
        ctx = canvas.getContext('2d');
    ctx.fillRect(10, 10, 10, 10);
</script>

在页面上尝试一下，你会看到一个小黑方块！

getContext 函数检索了正确的上下文，它是一个对象，其方法用于绘制、填充和一般性地修改画布。上面我们使用了 fillRect，它以前两个参数作为矩形左上角的 x 和 y 坐标，以最后两个参数作为 宽度 和 高度。

动画

canvas 的工作方式有点像真实的画布——像素被绘制并层叠在彼此之上，直到你擦除——清除——它们。这意味着如果你想让某个东西在画布上移动并产生动画效果，你必须反复清除画布（或其中一部分）并重绘场景。

在下一个示例中，我们让正方形在 canvas 上来回弹跳，画布会自动调整大小以填满屏幕。loop 是代码的核心部分。clearRect 函数用于在每一帧之前清除整个画布。

var canvas = document.querySelector('canvas'),
    ctx = canvas.getContext('2d');

var resize = function () {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
};

window.addEventListener('resize', resize);

window.addEventListener('load', function () {

  resize();

  var pos, vel;
  pos = {
    x: 10,
    y: 10
  };
  vel = {
    x: 1,
    y: 1
  };

  var loop = function () {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    pos.x += vel.x;
    pos.y += vel.y;
    if (pos.x < 5 || pos.x > canvas.width - 5) {
      vel.x *= -1;
    }
    if (pos.y < 5 || pos.y > canvas.height - 5) {
      vel.y *= -1;
    }
    ctx.fillRect(pos.x - 5, pos.y - 5, 10, 10);
  };

  setInterval(loop, 1000 / 60);
});

Canvas 有很多值得探索的地方，这只是一个非常浅显的介绍。网上有很多专门的资源，所以要了解更多，Google 是你最好的朋友。