canvas画圆 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>

</head>
<body>
  <canvas id="canvas" style="border:1px solid #ccc;display:block;">
    当前浏览器不支持canvas，请更换浏览器后在试。
  </canvas>

<script>
  window.onload = function () {
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');

    canvas.width = 1200;
    canvas.height = 800;

    context.lineWidth = 5;
    context.strokeStyle = 'black';
    for (var i = 0; i < 10; i++) {
      context.beginPath();
      context.arc(50 + i * 100, 60, 40, 0 , 0.2 * (i + 1) * Math.PI);
      // context.arc(圆心x轴坐标,圆心y轴坐标,半径,起始点,终点,[顺时针/逆时针，true为逆时针，默认为false]);
      context.closePath();
      context.stroke();
    };

    for (var i = 0; i < 10; i++) {
      context.beginPath();
      context.arc(50 + i * 100, 200, 40, 0 , 0.2 * (i + 1) * Math.PI);
      context.stroke();
    };

    for (var i = 0; i < 10; i++) {
      context.beginPath();
      context.arc(50 + i * 100, 400, 40, 0 , 0.2 * (i + 1) * Math.PI, true);
      context.closePath();
      context.stroke();
    };

    context.fillStyle = 'orange';
    for (var i = 0; i < 10; i++) {
      context.beginPath();
      context.arc(50 + i * 100, 600, 40, 0 , 0.2 * (i + 1) * Math.PI, true);
      context.stroke();
      context.fill();
    };

  }
</script>
</body>
</html>

 

posted @ 2015-09-28 17:54  自由行走的猪  阅读(861)  评论(0)    收藏  举报