参考 mdn canvas：developer.mozilla.org/zh-CN/docs/…

绘制矩形

1. fillRect(x, y, width, height)

   绘制一个填充的矩形

2. strokeRect(x, y, width, height)

   绘制一个矩形的边框

3. clearRect(x, y, width, height)

   清除指定矩形区域，让清除部分完全透明。

绘制路径

1. beginPath()

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

2. closePath()

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

3. stroke()

   通过线条来绘制图形轮廓。

4. fill()

   通过填充路径的内容区域生成实心的图形

5. lineTo(x, y)

   绘制一条从当前位置到指定x以及y位置的直线。

绘制三角形

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}

注意：当前路径为空，即调用beginPath()之后，或者canvas刚建的时候，第一条路径构造命令通常被视为是moveTo（），无论实际上是什么。出于这个原因，你几乎总是要在设置路径之后专门指定你的起始位置。

圆弧

arc(x, y, radius, startAngle, endAngle, anticlockwise)

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

arcTo(x1, y1, x2, y2, radius)

根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。

绘制笑脸

    ctx.beginPath();
    ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 绘制
    ctx.moveTo(110, 75);
    ctx.arc(75, 75, 35, 0, Math.PI, false);   // 口(顺时针)
    ctx.moveTo(65, 65);
    ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // 左眼
    ctx.moveTo(95, 65);
    ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // 右眼
    ctx.stroke();

绘制爱心

	ctx.beginPath();
    ctx.moveTo(75, 40);
    ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
    ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
    ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
    ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
    ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
    ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
    ctx.fillStyle = 'pink';
    ctx.fill();