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. PhantomReference 和 WeakReference 究竟有何不同

    本文基于 OpenJDK17 进行讨论,垃圾回收器为 ZGC. 提示: 为了方便大家索引,特将在上篇文章 <以 ZGC 为例,谈一谈 JVM 是如何实现 Reference 语义的> 中讨 ...

  2. 使用Xilinx SDK生成设备树

    章节描述: 介绍如何通过SDK生成设备树,以用于arm-Linux环境. 背景 开发环境: Windows:Vivado 2018.3 Linux :ubuntu 16.04 介绍: Device T ...

  3. markdown语法支持测试

    latex 公式 \(v, w, \nu, \omega\) \[\iiint, \oiiint \] \(\Set{ x | x<\frac 1 2 }\) \(\displaystyle \ ...

  4. 从零开始学Spring Boot系列-集成Spring Security实现用户认证与授权

    在Web应用程序中,安全性是一个至关重要的方面.Spring Security是Spring框架的一个子项目,用于提供安全访问控制的功能.通过集成Spring Security,我们可以轻松实现用户认 ...

  5. 超大容量 | 瑞芯微RK3588J工业核心板新增16GB DDR + 128GB eMMC配置！

    作为瑞芯微的金牌合作伙伴,创龙科技在2023年9月即推出搭载瑞芯微旗舰级处理器RK3588J的全国产工业核心板--SOM-TL3588. SOM-TL3588工业核心板是基于瑞芯微RK3588J/RK ...

  6. github中的子模块（git submodule）

    git中支持引用另外一个开源库,并且可以指定依赖的分支或者提交记录号. 比如fltk-rs 库的fltk-sys模块依赖了库 cfltk 并指明了依赖的提交是 8a56507 甚至可以嵌套,毕竟库自身 ...

  7. Spring中文官方文档

    Spring 中文文档 https://springdoc.cn/ Spring Boot 中文文档 https://www.docs4dev.com/docs/zh/spring-boot/1.5. ...

  8. SpringBoot整合Flyway数据库版本管理

    项目结构 添加依赖 <dependency> <groupId>org.flywaydb</groupId> <artifactId>flyway-co ...

  9. bean的二次加工-Spring5.X后置处理器BeanPostProcessor

    什么是BeanPostProcessor 是Spring IOC容器给我们提供的一个扩展接口 在调用初始化方法前后对Bean进行额外加工,ApplicationContext会自动扫描实现了BeanP ...

  10. git push提交出现Everything up-to-date提示问题

    以前通过git提交代码到GitHub上的个人main分支时,曾出现过这样一个很低级的错误-- 出现这个错误原因,其实就是没有正确执行指令造成的,也就是没有正常提交数据. 一般按照以下命令提交,基本就没 ...