1 <!DOCTYPE html>

 2 <html lang="en">

 3   <head>

 4     <meta charset="UTF-8" />

 5     <title>18-Canvas绘制饼状图</title>

 6     <style>

 7       * {

 8         margin: 0;

 9         padding: 0;

10       }

11       canvas {

12         display: block;

13         margin: 0 auto;

14         background: red;

15       }

16     </style>

17   </head>

18   <body>

19     <canvas width="500" height="400"></canvas>

20     <script>

21       // 1.拿到canvas

22       let oCanvas = document.querySelector("canvas");

23       // 2.从canvas中拿到绘图工具

24       let oCtx = oCanvas.getContext("2d");

25

26       // 1.计算圆心的位置

27       let rx = oCtx.canvas.width / 2;

28       let ry = oCtx.canvas.height / 2;

29

30       // 2.绘制第一个扇形

31       // oCtx.moveTo(rx, ry);

32       // oCtx.arc(rx, ry, 100, 0, Math.PI/2);

33       // oCtx.fillStyle = randomColor();

34       // oCtx.fill();

35

36       // 3.绘制第二个扇形

37       // oCtx.beginPath();

38       // oCtx.moveTo(rx, ry);

39       // oCtx.arc(rx, ry, 100, Math.PI/2, Math.PI);

40       // oCtx.fillStyle = randomColor();

41       // oCtx.fill();

42

43       // 4.绘制第三个扇形

44       // oCtx.beginPath();

45       // oCtx.moveTo(rx, ry);

46       // oCtx.arc(rx, ry, 100, Math.PI, Math.PI + Math.PI/2);

47       // oCtx.fillStyle = randomColor();

48       // oCtx.fill();

49

50       // 5.绘制第四个扇形

51       // oCtx.beginPath();

52       // oCtx.moveTo(rx, ry);

53       // oCtx.arc(rx, ry, 100, Math.PI + Math.PI/2, Math.PI * 2);

54       // oCtx.fillStyle = randomColor();

55       // oCtx.fill();

56

57       let startAngle = 0;

58       for (let i = 1; i <= 4; i++) {

59         let endAngle = (i * Math.PI) / 2;

60         oCtx.beginPath();

61         oCtx.moveTo(rx, ry);

62         oCtx.arc(rx, ry, 100, startAngle, endAngle);

63         oCtx.fillStyle = randomColor();

64         oCtx.fill();

65         startAngle = endAngle;

66       }

67

68       function randomColor() {

69           let r = Math.floor(Math.random() * 256);

70           let g = Math.floor(Math.random() * 256);

71           let b = Math.floor(Math.random() * 256);

72           return `rgb(${r},${g},${b})`;

73       };

74

75

76

77       //   定时器返回数据

78       //   function qwe(a) {

79       //     console.log(a);

80       //   }

81

82       //   function dsd() {

83       //     setInterval(() => {

84       //       let qwer = 1;

85       //       qwe(qwer);

86       //     }, 1000);

87       //   }

88       //   dsd();

89     </script>

90   </body>

91 </html>

18-canvas绘制饼状图的更多相关文章

  1. 第166天：canvas绘制饼状图动画

    canvas绘制饼状图动画 1.HTML <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  2. [canvas]用canvas绘制饼状图

    折线图之后又来饼状图啦~\(≧▽≦)/~啦啦啦 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  3. 使用canvas绘制饼状图

    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...

  4. Canvas(3)---绘制饼状图

    Canvas(3)---绘制饼状图 有关canvas之前有写过两篇文章 1.Canvas(1)---概述+简单示例 2.Canvas(2)---绘制折线图 在绘制饼状图之前,我们先要理解什么是圆弧,如 ...

  5. 用PNChart绘制饼状图简介

    写在前面 最近做的小Demo中有一个绘制饼状图的需求.在开始实现之前上网了解了一下现有的一些绘制图形的第三方库,相应的库还是有挺多的,PNChart便是其中一个.PNChart是一个90后的中国boy ...

  6. canvas动态绘制饼状图，

    当我们使用Echrts很Highcharts的时候,总是觉得各种统计图表是多么神奇,今天我就用现代浏览器支持的canvas来绘制饼状统计图,当然仅仅是画出图并没什么难度,但是统计图一般都有输入,根据不 ...

  7. canvas绘制饼型图

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

  8. Graphic系统综合练习案例-绘制饼状图

    这里用一个案例来将之前学过的关于绘制相关的东东加强巩固一下,纯绘制,木有加点击效果,先来看下最终效果: github中这种百分比饼图的效果非常非常之多,实际在项目中开发当产品有这样类似的需求时做为开发 ...

  9. IOS之以UIBezierPath绘制饼状图

    1.绘制的饼状图是通过多个扇形拼和而成,绘制一个扇形也是比较简单的,核心代码如下: 先画一条圆弧,再画半径,接着再画一条圆弧,最后闭合路径: UIBezierPath*  aPath = [[UIBe ...

  10. [Echarts]用Echarts绘制饼状图

    在项目网站的网页中,有这样一幅图: 心血来潮,想使用百度Echarts来绘制一下,可是没能绘制得完全一样,Echarts饼状图的label不能在图形下面放成一行,最后的效果是这样子的: 鼠标移动到it ...

随机推荐

  1. typroa破解

    Typora 一款 Markdown 编辑器和阅读器 风格极简 / 多种主题 / 支持 macOS,Windows 及 Linux 实时预览 / 图片与文字 / 代码块 / 数学公式 / 图表 目录大 ...

  2. macOS Big Sur 11.0.1光盘镜像文件制作

    https://blog.csdn.net/hymnal/article/details/110393501

  3. 【论文阅读】IROS2017: Voxblox & RAL2019: Voxblox++

    IROS2017: Voxblox & RAL2019: Voxblox++ Status: Finished Type: RAL Year: 2019 组织/Sensor: ETH-ASL ...

  4. TI AM62x工业开发板规格书（单/双/四核ARM Cortex-A53 + 单核ARM Cortex-M4F，主频1.4GHz）

    1 评估板简介 创龙科技TL62x-EVM是一款基于TI Sitara系列AM62x单/双/四核ARM Cortex-A53 + 单核ARM Cortex-M4F多核处理器设计的高性能低功耗工业评估板 ...

  5. IOS浏览器返回刷新页面

    $(function () { var isPageHide = false; window.addEventListener('pageshow', function () { if (isPage ...

  6. VulnHub-DC-7渗透流程

    DC-7 kali:192.168.157.131 靶机:192.168.157.151 信息收集 nmap -sV -A -p- 192.168.157.151 虽然有robots.txt等敏感文件 ...

  7. springboot实现登录demo

    实现简单的登录功能 实体类 定义实体类为User3类. 使用@Data:提供类的get,set,equals,hashCode,canEqual,toString方法: 使用@AllArgsConst ...

  8. oeasy 教您玩转 linux 010215 随机谚语 fortune

    我们来回顾一下 上一部分我们都讲了什么? 把图像转化为了ascii️字符画 并且修改了cowsay的图像素材的位置 我们想要让牛讲一个随机的笑话 首先我们要有个说笑话的软件包 # 下载fortune ...

  9. oeasy教您玩转vim - 51 - # 读写文件

    读写文件 回忆上节课内容 命令行的光标控制 方向键️️️️️可以控制左右移动 shift+️️️️️按照word左右移动光标 ctrl+b 到开头begin ctrl+e 到结尾end ctrl+w ...

  10. oeasy教您玩转vim - 45 - # 按行编辑

    ​ 按行编辑 回忆上节课内容 上次我们主要就是综合运用 很好玩的,更快速的解决问题 进行计算 ctrl+a,将具体的数字加1 ctrl+x,将具体的数字减1 5ctrl+a,将具体的数字加5 一次命令 ...