canvas生成扇形

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="chrome=1">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
  </style>

</head>

<body>
    <img src="" id="img">

  <script>


   function createShanImg(angle, color, strokeColor) {
        var angle = +angle;
        var canvas = document.createElement("canvas");
        canvas.width = 252;

        canvas.height = 252;
        var ctx = canvas.getContext("2d");
        // 开始一条新路径
        ctx.beginPath();

        // 位移到圆心，方便绘制
        ctx.translate(126, 126);
        // 移动到圆心
        ctx.moveTo(0, 0);
        // 绘制圆弧
        ctx.arc(
          0,
          0,
          126 - 10,
          (Math.PI / 180) * (80 + 180 + angle),
          (Math.PI / 180) * (100 + 180 + angle),
          false
        );
        // 闭合路径
        ctx.closePath();
        ctx.strokeStyle = strokeColor;
        ctx.fillStyle = color;
        // ctx.fillStyle = "rgb("+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+")";
        ctx.globalAlpha = "0.7";
        ctx.lineWidth = 2;
        ctx.stroke();
        ctx.fill();
        return canvas.toDataURL("image/png");
      }
  document.getElementById("img").src=createShanImg(100, 'blue', 'blue')



    
  </script>
</body>

</html>
posted @ 2020-05-26 13:06  刘浩2561179983  阅读(343)  评论(0)  编辑  收藏  举报