我的Canvas常用方法和requestAnimationFrame

我自己常用的canvas函数

• 获取目标元素

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

• 绘制矩形

  context.fillRect(x, y, width, height); // 绘制实心矩形
  context.strokeRect(x, y, width, height); // 绘制空心矩形

• 绘制路径

  context.beginPath(); // 开始绘制路径
  context.moveTo(x, y); // 路径开始点坐标
  context.lineTo(x, y); // 路径结束点坐标
  context.stroke(); // 绘制空心路径
  context.fill(); // 绘制实心路径
  context.closePath(); // 绘制路径结束

• 绘制文字

  context.font = "60px 黑体"; // font信息，至少包含字体大小和字体名称
  context.fillText(text, x, y); // 绘制实心文字
  context.strokeText(text, x, y); // 绘制空心文字

• 绘制样式

  context.fillStyle = "red"; // 实心颜色
  context.strokeStyle = "#ff4355"; // 空心颜色
  context.lineWidth = ; //

• 绘制其他

  context.arc(x, y, r, startAngle, endAngle, false);
  // 绘制圆形x,y为圆心坐标，r为圆的半径，sA为圆的开始弧度，eA为圆结束的
  // 弧度，false表示按顺时针方向绘制，true的话为逆时针。  
  // 例如一个圆为：  
  context.arc(, , , , *Math.PI, false);
  /**********************************************/
  context.drawImage(image, x, y, width, height);
  // 传入一个图片实例，绘制在画布上
  context.drawImage(image, sx, sy, sw, sh, x, y, width, height);
  // 对图片进行剪裁
  context.clearRect(x, y, width, heigth); // 清除画布

  requestAnimationFrame

  他是干嘛的呢？在早期浏览器中实现动画是使用setTimeOut和setInterval，但是我们知道JS是单线程的，setTimeOut和setInterval中的任务会被存到异步队列中，等待同步队列中的任务执行完成才会被加载执行，所以如果在同步队列中遇到了执行非常缓慢的任务，那么异步队列中的任务就只能等待了。但是如果这样画面就会出现卡顿，体验很糟糕。
  而requestAnimationFrame的出现就是为了解决这个问题，它是专门为实现高性能的帧动画而设计的一个API，以每秒60帧的效率来渲染动画，目前已在多个浏览器得到了支持，你可以把它用在 DOM 上的效果切换或者 Canvas 画布动画中。
  在多个浏览器的兼容方法如下:

  window.requestAnimaFrame = 
  window.requestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  window.oRequestAnimationFrame ||
  window.msRequestAnimationFrame ||
  function(callback) {
  window.setTimeout(callback,  / );
  };

使用实例如下