当前位置:首页 > canvas绘制饼图例子

canvas绘制饼图例子

发布于 2018-07-16 阅读 458 次 Canvas Javascript

介绍:

canvas绘制饼图例子

预览

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <style>
  7. html,body{padding:0;margin:0;}
  8. .mydraw{display:block;position:relative;margin:0 auto;padding:0;}
  9. </style>
  10. </head>
  11. <body>
  12. <canvas class="mydraw" id="mycanvas">您的浏览器不支持canvas</canvas>
  13. </body>
  14. <script>
  15. var canvas=document.getElementById("mycanvas"),
  16. ctx = canvas.getContext( '2d' ),
  17. w = window.innerWidth,
  18. h = window.innerHeight;
  19. canvas.width = w,
  20. canvas.height = h;
  21. //圆心坐标
  22. var cx = w/2,
  23. cy = h/2,
  24. r = cx/2;
  25. var num = [0.1, 0.2, 0.1, 0.2, 0.15, 0.05, 0.2],
  26. n = num.length,
  27. angle;
  28. // 绘制扇形
  29. function draw(i){
  30. ctx.save();
  31. ctx.beginPath();
  32. ctx.translate(cx,cy)
  33. if(i>0){
  34. angle = getAngle(num, i);
  35. ctx.rotate(2*Math.PI*angle);
  36. }
  37. ctx.moveTo(0, 0);
  38. // ctx.lineTo(0+r, 0); //不画线也可以
  39. ctx.arc(0, 0, r, 0, 2*Math.PI*num[i]);
  40. // ctx.lineTo(0,0); //不画线也可以
  41. ctx.stroke();
  42. ctx.fillStyle = getRandColor();
  43. ctx.fill();
  44. ctx.restore();
  45. }
  46. // 给扇形添加点击事件
  47. canvas.onclick = function(){
  48. }
  49. function getAngle(arr, cur){
  50. var res = 0;
  51. for(var i=0; i<cur; i++){
  52. res += arr[i];
  53. }
  54. return res;
  55. }
  56. function getRandColor(){
  57. var r = getRandom(0, 255),
  58. g = getRandom(0, 255),
  59. b = getRandom(0, 255);
  60. var rgb = "rgb("+r+","+g+","+b+")";
  61. return rgb;
  62. }
  63. function getRandom(min, max){
  64. return Math.floor((max-min)*Math.random() + min);
  65. }
  66. function loop(){
  67. if(n > -1){
  68. draw(n);
  69. setTimeout(loop, 50);
  70. }
  71. n--;
  72. }
  73. // 饼图
  74. loop();
  75. // 风车
  76. function drawLeave () {
  77. var lnum = 12;
  78. angle = 2*Math.PI/lnum;
  79. for(var i=0; i<lnum; i+=1){
  80. ctx.save();
  81. ctx.beginPath();
  82. ctx.translate(cx,cy);
  83. ctx.rotate(angle*i);
  84. ctx.moveTo(0, 0);
  85. ctx.lineTo(0+r, 0);
  86. ctx.arc(0, 0, r, 0, angle);
  87. ctx.lineTo(0, 0);
  88. ctx.fillStyle = getRandColor();
  89. ctx.fill();
  90. ctx.restore();
  91. }
  92. // 绘制中心圆
  93. ctx.save();
  94. ctx.beginPath();
  95. ctx.translate(cx,cy);
  96. ctx.arc(0, 0, r/8, 0, 2*Math.PI);
  97. ctx.fillStyle = getRandColor();
  98. ctx.fill();
  99. ctx.restore();
  100. }
  101. // function loop(){
  102. // window.requestAnimationFrame(loop);
  103. // if(r > 10){
  104. // r/=2;
  105. // }else{
  106. // r = cx/2
  107. // }
  108. // drawLeave();
  109. // }
  110. // loop()
  111. // 绘制加载圈圈
  112. var start = 0;
  113. var qmun = 100;
  114. function drawLoad () {
  115. angle = 2*Math.PI/qmun;
  116. for(var i=0; i<qmun; i+=2){
  117. ctx.save();
  118. ctx.beginPath();
  119. ctx.translate(cx,cy);
  120. ctx.rotate(angle*(i+start));
  121. ctx.moveTo(0, 0);
  122. ctx.lineTo(0+r, 0);
  123. ctx.arc(0, 0, r, 0, angle);
  124. ctx.lineTo(0, 0);
  125. // ctx.fillStyle = "rgb("+i*2+","+i*2+","+i*2+")";
  126. ctx.fillStyle = "rgba(0, 0 ,0, "+1/qmun*2*i+")";
  127. ctx.fill();
  128. ctx.restore();
  129. }
  130. // 绘制中心圆
  131. ctx.save();
  132. ctx.globalCompositeOperation = "destination-out";
  133. ctx.beginPath();
  134. ctx.translate(cx,cy);
  135. ctx.arc(0, 0, r-10, 0, 2*Math.PI);
  136. ctx.fillStyle = "#f00";
  137. ctx.fill();
  138. ctx.restore();
  139. //绘制中间数字
  140. var fontSize = r/3+"px";
  141. ctx.font = fontSize+" Georgia";
  142. ctx.textAlign = "center";
  143. ctx.textBaseline="middle";
  144. ctx.fillText(percent, cx, cy);
  145. }
  146. // function loop(){
  147. // ctx.clearRect(0, 0, w, h);
  148. // drawLoad();
  149. // window.requestAnimationFrame(loop);
  150. // // setTimeout(loop, 50)
  151. // if(start < qmun){
  152. // start += 2;
  153. // } else {
  154. // start = 0;
  155. // }
  156. // }
  157. // r = r/4;
  158. // var percent = "87%";
  159. // loop();
  160. // drawLoad()
  161. // 倒计时
  162. </script>
  163. </html>