<canvas> 默认大小为width:300px;height:150px;

• 可以通过html设置宽髙，用css设置宽髙可能会导致图像扭曲

  <canvas id="tutorial" width="150" height="150"></canvas>

• 使用getContext()方法获得渲染上下文和它的绘画功能

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

基本图形绘制

• 矩形

  canvas只支持一种原生的图形绘制：矩形。

  function draw() {
   var canvas = document.getElementById('canvas');
   if (canvas.getContext) {
   	var ctx = canvas.getContext('2d');
      //以(25,25)为起点绘制一个宽髙为100的矩形
   	ctx.fillRect(25,25,100,100);
      //清除指定的矩形区域
   	ctx.clearRect(45,45,60,60);
      //绘制一个矩形边框
   	ctx.strokeRect(50,50,50,50);
   }
  }

• 绘制路径

  beginPath() – 新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。

  closePath() – 闭合路径之后图形绘制命令又重新指向到上下文中。

  stroke() – 通过线条来绘制图形轮廓。

  fill() – 通过填充路径的内容区域生成实心的图形，当调用fill()函数的时候，所有没有闭合的形状都会自动闭合。

• 移动笔触

  moveTo(x, y) – 将笔触移动到指定的坐标上。

• 线

  lineTo(x, y) – 绘制一条从当前位置到指定位置的直线。

• 绘制三角形

  function draw() {
   var canvas = document.getElementById('canvas');
   if (canvas.getContext){
       var ctx = canvas.getContext('2d');
       // 填充三角形
       ctx.beginPath();
       ctx.moveTo(25,25);
       ctx.lineTo(105,25);
       ctx.lineTo(25,105);
       ctx.fill();
       // 描边三角形
       ctx.beginPath();
       ctx.moveTo(125,125);
       ctx.lineTo(125,45);
       ctx.lineTo(45,125);
       ctx.closePath();
       ctx.stroke();
   }
  }

• 圆弧

  arc(x, y, radius, startAngle, endAngle, anticlockwise) – 画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。

  arcTo(x1, y1, x2, y2, radius) – 根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。

样式

• fillStyle = color – 设置图形的填充颜色。

• strokeStyle = color – 设置图形轮廓的颜色。

  ctx.fillStyle = "orange";
  ctx.fillStyle = "#FFA500";
  ctx.fillStyle = "rgb(255,165,0)";
  ctx.fillStyle = "rgba(255,165,0,1)";

• lineWidth = value – 设置线条宽度。

Canvas画板

参考文献：MDN-Canvas