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. 【译】Visual Studio 2022 - 17.10 性能增强

    我们很高兴地宣布 Visual Studio 2022 的最新更新,它为您带来了 IDE 各个领域的一系列性能增强.在这篇博客中,我们将重点介绍17.10版本中一些最显著的改进,比如更快的 Windo ...

  2. 原生js实现下拉框可输入

    js实现下拉框可输入 前言 众所周知,html默认的下拉框是无法输入值的,然后最新的办法是用datalist和输入框绑定,但是很多浏览器不支持.然后还有很多框架提供的下拉框都是可输入的.但是公司的项目 ...

  3. 工控必备！NXP i.MX 8M Mini开发板规格书资料分享，高性能低功耗！

    1 核心板简介 创龙科技SOM-TLIMX8-B是一款基于NXP i.MX 8M Mini的四核ARM Cortex-A53 + 单核ARM Cortex-M4异构多核处理器设计的高端工业级核心板,A ...

  4. 全志科技A40i开发板规格书（四核ARM Cortex-A7，主频1.2GHz）

    1.评估板简介 创龙科技TLA40i-EVM是一款基于全志科技A40i处理器设计的4核ARM Cortex-A7高性能低功耗国产评估板,每核主频高达1.2GHz,由核心板和评估底板组成. 评估板接口资 ...

  5. PO、VO、BO、DTO、POJO、DAO、DO

    DO: domain object持久对象就是从现实世界中抽象出来的有形或无形的业务实体. PO:persistant object持久对象最形象的理解就是一个PO就是数据库中的一条记录.好处是可以把 ...

  6. c# 对DataTable数据筛选后进行修改操作

    记录一次对DataTable中的数据筛选去重后,然后对数据进行修改! foreach (DataRow dr in dt.Rows) // 便利dt { if (StringUtil.isNotNul ...

  7. AI时代你一定要知道的Agent概念

    这两年,随着人工智能(AI)和计算能力的发展,AI应用的落地速度大大加快.以ChatGPT为代表的AI应用迅速火遍全球,成为打工人的常用工具.紧接着,多模态.AI Agent等各种高大尚的名词也逐渐进 ...

  8. OI-Wiki 学习笔记

    算法基础 \(\text{Update: 2024 - 07 - 22}\) 复杂度 定义 衡量一个算法的快慢,一定要考虑数据规模的大小. 一般来说,数据规模越大,算法的用时就越长. 而在算法竞赛中, ...

  9. 【VMware VCF】VMware Cloud Foundation Part 03：准备 Excel 参数表。

    VMware Cloud Foundation 使用 VMware Cloud Builder 工具完成自动化以及标准化的部署,除了要准备必须的用于部署管理域并运行管理相关组件的 ESXi 主机以外, ...

  10. springMvc使用自定义View生成Excel表格

    1:通过自定义的View视图可以让请求直接到一个Excel表去. 2:自定义的视图必须继承  AbstractXlsView /AbstractXlsxView / AbstractXlsxStrea ...