<!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>

canvas绘制三等分饼型图的更多相关文章

  1. canvas学习之饼状图

    接着上一节说,这次我使用canvas绘制了饼状图,主要是SectorGraph.js, 引入 import {canvasPoint} from '../../assets/js/canvas';im ...

  2. 用canvas 绘制的饼状统计图、柱状统计图、折线统计图

    canvas 绘制的饼状统计图 canvas 绘制的柱状统计图 canvas 绘制的折线统计图

  3. [canvas]利用canvas绘制自适应的折线图

    前段时间学习了用canvas绘制折现图,且当画布变换大小,折现图会随之变化,现附上代码 <!DOCTYPE html> <html lang="en"> & ...

  4. canvas+js画饼状图

    效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  5. HTML5之Canvas绘图实例——饼状图

    实现饼状分布画图(如下):调试环境:Firefox

  6. JupyterLab绘制:柱状图,饼状图,直方图,散点图,折线图

    JupyterLab绘图 喜欢python的同学,可以到 https://v3u.cn/(刘悦的技术博客) 里面去看看,爬虫,数据库,flask,Django,机器学习,前端知识点,JavaScrip ...

  7. 绘制matplotlib 饼状图

    参考:https://blog.csdn.net/ScarlettYellow/article/details/80458797 (2)2016年就业人员在三次产业中分布的饼状图. def swap( ...

  8. canvas绘制饼型图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. C#绘制立体三维饼状图

    转载自原文 C#绘制立体三维饼状图(超酷) 内容原文地址:LINK [翻译]Julijan Sribar著3D Pie Chart一个用于绘制立体三维饼状图的C#类库[简介]本文的想法就是创建一个独立 ...

随机推荐

  1. UVa 1585 待解决

    是在遇到第一个ooxx的时候会出错,会少算一个1 #include<stdio.h> int main() { int i,k=0,sum=0; char a[100]={"oo ...

  2. ie6 中文字符编码 出现的问题解决

    0 前言   公司要求网页要支持ie6.7.8,结果我的设备在ie7.8.9均工作正常,而在ie6时就出现各种奇怪的错误,在这个背景下,开始动手解决网页不兼容ie6的情况.   1 搭建ie6的实验平 ...

  3. RabbitMQ学习之集群镜像模式配置

    1.增加负载均衡器 关于负载均衡器,商业的比如F5的BIG-IP,Radware的AppDirector,是硬件架构的产品,可以实现很高的处理能力.但这些产品昂贵的价格会让人止步,所以我们还有软件负载 ...

  4. ios 编译版本 最低版本 运行版本 动态链接库

    if ([[UIDevice currentDevice].systemVersion floatValue] >= 10.0) 运行环境判断: #if __IPHONE_OS_VERSION_ ...

  5. Linux系统编程@进程管理（一）

    课程目标: 构建一个基于主机系统的多客户即时通信/聊天室项目 涉及的理论知识 进程控制:僵尸进程/孤儿进程.进程控制.守护进程... 进程间通信:管道.命名管道.信号... 多线程编程: 锁.信号量. ...

  6. MySQL 表与表之间建立关系

    引子:如下图是一张非常寻常的表格,在以前的工作中实常会制作类似的表格,但是今天的数据库内容,将我之前这种传统的制表思路上升了一个层次: 今天核心的内容就是怎样让表与表之间产生关系,在思考这个问题的时候 ...

  7. 修改默认input（file）的样式

    以上是默认的 <input type="file" > 但是丑爆了啊同志们~~长久以来都是调用大神的代码,今天我也小试牛刀,做出了如下效果: 这样还是能接受的样子啦~ ...

  8. Project Euler 19 Counting Sundays（ 蔡勒公式计算星期数 ）

    题意:在二十世纪(1901年1月1日到2000年12月31日)中,有多少个月的1号是星期天? 蔡勒公式:计算 ( year , month , day ) 是星期几 以下图片仅供学习! /****** ...

  9. maven引入MySQL相关依赖

    <!--mysql驱动包--> <dependency> <groupId>mysql</groupId> <artifactId>mysq ...

  10. Python中图像的缩放 resize（）函数的应用

    cv2.resize(src, dsize[, dst[, fx[, fy[, interpolation]]]]) -> dst 参数说明: src - 原图 dst - 目标图像.当参数ds ...