zoukankan      html  css  js  c++  java
  • canvas绘制三等分饼型图

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <canvas id="c"></canvas>
        <script>
            var cv = document.getElementById("c");
            var ctx = cv.getContext("2d");
    
            cv.width = 600;
            cv.height = 400;
            cv.style.border = "1px solid #000";
    
            // 角度转弧度
            function toRadian(angle) {
                return angle / 180 * Math.PI;
            }
    
            // 弧度转角度
            function toAngle(radian) {
                return radian / Math.PI * 180;
            }
            
               // 绘制饼型图(三等分)
               var x0 = 200, y0 = 200,
                   radius = 100,
                   startAngle = -90,
                   step = 120;
    
               // 线绘制第一个扇形
               // 基本方式
               // ctx.fillStyle = "red";
               // ctx.moveTo(x0, y0);
               // ctx.arc(x0, y0, radius, toRadian(startAngle), toRadian(-90 + 120));
               // ctx.fill();
    
               // ctx.beginPath();
               // ctx.fillStyle = "green";
               // ctx.moveTo(x0, y0);
               // ctx.arc(x0, y0, radius, toRadian(-90 + 120), toRadian(30 + 120));
               // ctx.fill();
    
               // ctx.beginPath();
               // ctx.fillStyle = "blue";
               // ctx.moveTo(x0, y0);
               // ctx.arc(x0, y0, radius, toRadian(30 + 120), toRadian(150 + 120));
               // ctx.fill();
    
               var colors = ["red", "green", "blue"];
               colors.forEach(function(value, index) {
                   ctx.beginPath();
                   
                   ctx.fillStyle = value;
                   ctx.moveTo(x0, y0);
                   ctx.arc(x0, y0, radius, toRadian(startAngle), toRadian(startAngle+=step));
                   ctx.fill();
               });
    
    
               // ctx.closePath();
               // ctx.stroke();
    
               // 绘制扇形
               // 1 moveTo 到圆形
               // 2 绘制圆弧
               // 3 如果是 fill 这时候扇形就绘制完毕了
               //      如果是 stroke ,最简单的处理方式: closePath();
        </script>
    </body>
    </html>
  • 相关阅读:
    WSL中使用npm install报错
    在npm install时node-gyp出现错误
    Chrome禁用隐藏www和m
    Git始终忽略特定文件的某一行内容
    macOS关闭修改扩展名的提示
    解决安装Anaconda后ZSH中使用的依然是系统自带的Python
    macOS上更顺手的终端
    自用的越狱插件
    Tomcat安装后修改路径方法
    TestStack.White安装详解
  • 原文地址:https://www.cnblogs.com/lsy0403/p/5898060.html
Copyright © 2011-2022 走看看