canvas-圆形

最新推荐文章于 2024-01-20 14:53:00 发布

十里夜

最新推荐文章于 2024-01-20 14:53:00 发布

阅读量476

点赞数

分类专栏： canvas 文章标签： canvas

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

版权

canvas 专栏收录该内容

13 篇文章

订阅专栏

<!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.beginPath();
          //绘制圆形
          //context.arc(X坐标,Y坐标,半径,起始位置（弧度制）,结束位置（弧度制）,画法顺序（true:逆时针/false:顺时针）);
          context.arc(100,100,50,0,Math.PI*2/3,false);
          //描边
          context.stroke();

          //开启新的一条路径
          context.beginPath();
          //context.arc(X坐标,Y坐标,半径,起始位置（弧度制）,结束位置（弧度制）,画法顺序（true:逆时针/false:顺时针）);
          context.arc(300,100,50,0,Math.PI*2/3,true);
          //描边
          context.stroke();

          //开启新的一条路径
          context.beginPath();
          //绘制圆形
          //context.arc(X坐标,Y坐标,半径,起始位置（弧度制）,结束位置（弧度制）,画法顺序（true:逆时针/false:顺时针）);
          context.arc(100,300,50,0,Math.PI*2/3,false);
          //路径闭合方法
          context.closePath();
          //描边
          context.stroke();

          //开启新的一条路径
          context.beginPath();
          //context.arc(X坐标,Y坐标,半径,起始位置（弧度制）,结束位置（弧度制）,画法顺序（true:逆时针/false:顺时针）);
          context.arc(300,300,50,0,Math.PI*2/3,true);
          //设置边框的像素
          context.lineWidth = 10;
          //设置边框的属性
          context.strokeStyle = "blue";
          //绘制边框
          context.stroke();
          //设置填充属性
          context.fillStyle="red";
          //填充
          context.fill();

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