html5 h5使用canvas 画一个圆角矩形

  <canvas id="can" width="500" height="300"></canvas>

<script>
  var canvas = document.getElementById('can');
  var ctx = canvas.getContext("2d");
  ctx.moveTo(100, 110);  // 设置起点，为啥y轴要110.， 因为拐角的为10，所以往下移动10个像素单位
  ctx.arcTo(100, 200, 200, 200, 10); // 确定好第一个点后， 第二个点是沿着y轴，向下，并且C点是严重水平轴，拐角大小为10个单位， 其他三个都是一样的道理
  ctx.arcTo(200, 200, 200, 100, 10);
  ctx.arcTo(200, 100, 100, 100, 10);
  ctx.arcTo(100, 100, 100, 200, 10);
  ctx.stroke();
</script>