小球运动

代码：

window.onload = function () {
  var canvas = document.getElementById("canvas"),
      context = canvas.getContext("2d");

  var xpos = -20;

  setInterval(function () {
    requestAnimationFrame(draw);
  }, 30);

  function draw() {
    context.clearRect(0, 0, canvas.width, canvas.height);

    context.save();
    context.fillStyle = '#379956';
    context.beginPath();
    context.arc(xpos, 100, 20, 0, Math.PI * 2);
    context.fill();
    context.restore();

    context.save();
    context.fillStyle = '#FFC85B';
    context.beginPath();
    context.arc(xpos, 100, 10, 0, Math.PI * 2);
    context.fill();
    context.restore();

    if (xpos <= 320) {
      xpos++;
    } else {
      xpos = -20;
    }
  }
}

转动

代码：

window.onload = function () {
  var canvas = document.getElementById("canvas"),
      context = canvas.getContext("2d");

  var angle = 0;

  setInterval(function () {
    requestAnimationFrame(draw);
  }, 30);


  function draw() {

    context.clearRect(0, 0, canvas.width, canvas.height);

    context.save();
    context.fillStyle = '#379956';
    context.translate(100, 100);
    context.rotate(angle*2);
    context.fillRect(-20, -20, 40, 40);
    context.restore();

    context.save();
    context.fillStyle = '#FFC85B';
    context.translate(200, 100);
    var scale = Math.sin(angle) + Math.PI / 2;
    context.scale(scale, scale);
    context.rotate(angle);
    context.fillRect(-20, -20, 40, 40);
    context.restore();

    angle += 0.1;

  }
}

修改一些参数就会出现很多有意思的旋转效果：

最后，根据这两天学的基础知识，写了个进度调加载

window.onload = function () {
  var canvas = document.getElementById("canvas"),
      context = canvas.getContext("2d");

  var x = 40,
      running = true;


  /* 监听鼠标单击事件
     加载过程中点击暂停，再次点击继续
     进度条加载完成后点击重新开始  */

  canvas.addEventListener('click', function () {
    if (x >= 280) {
      context.fillRect(0, 0, 320, 200);
      x = 40;
      start_process = setInterval(function () {
        requestAnimationFrame(draw);
      }, 30);
    } else {
      if (running) {
        clearInterval(start_process);
        running = false;
      } else {
        start_process = setInterval(function () {
          requestAnimationFrame(draw);
        }, 30);
        running = true;
      }
    }
  });

  // 定时任务
  var start_process = setInterval(function () {
    requestAnimationFrame(draw);
  }, 30);

  // 主绘制函数
  function draw() {

    // 背景及加载框
    bg();

    // 进度条
    process();

    // 进度提示文字
    text();
  }

  function bg() {

    context.fillStyle = 'white';
    context.fillRect(0, 0, canvas.width, canvas.height);

    context.lineWidth = 30;
    context.lineCap = 'round';
    context.strokeStyle = '#495664';
    context.beginPath();
    context.moveTo(42, 80);
    context.lineTo(278, 80);
    context.stroke();
  }

  function process() {
    context.save()
    context.lineWidth = 30;
    context.lineCap = 'round';
    context.strokeStyle = '#8BC34A';
    context.beginPath();
    context.moveTo(40, 80);
    context.lineTo(x, 80);
    context.stroke();
    context.restore();

    // 不同阶段，加载速度不同
    if (x < 100) {
      x++;
    } else if (x < 200) {
      x += 2;
    } else if (x < 240) {
      x += 2.5;
    } else if (x < 280) {
      x += 0.8;
    } else {
      clearInterval(start_process);
    }
  }

  function text() {
    context.fillRect(0, 110, 320, 80);
    context.font = '20px April';
    context.textAlign = 'center';
    context.textBaseline = 'middle';
    context.fillStyle = '#495664';
    context.fillText(parseFloat((x - 40) * 5 / 12).toFixed(0) + '%', 160, 120);
  }

}

效果：

(加载过程中点击画布暂停，再次点击继续，加载完成点击重新开始)

PS: 没有居中... 请原谅，再jsbin上没问题...

canvas基础就先学到这里，之后再慢慢积累，大python还需要我继续学习