zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    IDEA 工具 破解码
    postman 使用 及断言
    MonkeyTest 命名
    Jmeter 测试单元的封装与复用
    开发性能测试工具——自己动手实现迭代功能
    jemter安装mysql数据驱动JDBC
    全链路性能测试知识点整理
    Java接口全链路优化:如何降低接口RT时长(转)
    测试自动化之Mock服务思路探讨
    算法分析与设计(一)时间与空间复杂度
  • 原文地址:https://www.cnblogs.com/liuhao-web/p/12465636.html
Copyright © 2011-2022 走看看