使用canvas绘制圆弧-优快云博客

本文链接：https://blog.youkuaiyun.com/hgyu_962464/article/details/54893126

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>canvas-圆弧</title>
    <style>
        #canvas{
            border: 1px solid palevioletred;
        }
    </style>
    <script>
      window.onload = function (){
          //获取到canvas元素
          var canvas = document.getElementById('canvas');
          //获取canvas中的画图环境
          var context = canvas.getContext('2d');

          //画笔移动初始位置
          context.moveTo(100,100)
          //画直线 .lineTo(终止X坐标,终止Y坐标);
         // context.lineTo(300,100);
          //画圆弧的方法：三个点 + 圆弧半径  = 圆弧 （其中：X0，Y0是基于上次的点，所以省去不传参）
          //画圆弧 .arcTo(X1坐标,Y1坐标,X2坐标,Y2坐标,半径);
          context.arcTo(350,100,350,150,50);
         // context.lineTo(350,350);
          context.arcTo(350,400,300,400,50);
         // context.lineTo(100,400);
          context.arcTo(50,400,50,350,50);
         // context.lineTo(50,150);
          context.arcTo(50,100,100,100,50);

          //   context.closePath();和context.stroke();自带一个机制：
          // 在画圆弧时，会自动补上一条过上一次的点的相切线段
          //所以，在绘制圆弧时可以省写 context.lineTo();方法
          //描边/描线
          context.stroke();


      }
    </script>
</head>
<body>
    <canvas id="canvas" width="500px" height="500px">
    </canvas>
</body>
</html>