Advertisement
Guest User

Untitled

a guest
Jan 19th, 2017
90
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.21 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Canvas Tutorial</title>
  6. <style type="text/css">
  7. body, html, #wrapper { width: 100%; height: 100%; }
  8. #wrapper { display: table }
  9. #main { display: table-cell; vertical-align: middle; text-align:center; }
  10. </style>
  11. </head>
  12. <body style="background-color: #333;" onload="draw()">
  13. <div id="wrapper">
  14. <div id="main">
  15. <canvas id="main-canvas" width="500" height="500"></canvas>
  16. </div>
  17. </div>
  18. <script>
  19. function degToRad(degree) { return degree / 180 * Math.PI; };
  20.  
  21. function drawFilledSector(ctxObject, centerX, centerY, radius, startDegree, endDegree, style) {
  22. ctxObject.fillStyle = style;
  23. ctxObject.beginPath();
  24. ctxObject.arc(centerX, centerY, radius, degToRad(startDegree), degToRad(endDegree));
  25. ctxObject.lineTo(centerX, centerY);
  26. ctxObject.fill();
  27. }
  28.  
  29. function draw() {
  30. var canvasElement = document.getElementById('main-canvas');
  31. if (canvasElement.getContext('2d')) {
  32. /* Examples of drawing pie chart - Most Popular Browser Statistics in December 2016 */
  33. var ctx = canvasElement.getContext('2d');
  34. var startRadian, endRadian;
  35. /* Chrome - 73.7% */
  36. startDegree = 270;
  37. endDegree = 0.737 * 360 - 90;
  38. drawFilledSector(ctx, 250, 250, 150, startDegree, endDegree, '#56ff22')
  39.  
  40. /* Firefox - 15.5% */
  41. startDegree = endDegree;
  42. endDegree = (0.737 + 0.155) * 360 - 90;
  43. drawFilledSector(ctx, 250, 250, 150, startDegree, endDegree, '#4de51e')
  44.  
  45. /* IE - 4.8% */
  46. startDegree = endDegree;
  47. endDegree = (0.737 + 0.155 + 0.048) * 360 - 90;
  48. drawFilledSector(ctx, 250, 250, 150, startDegree, endDegree, '#44cc1b')
  49.  
  50. /* Safari - 3.5% */
  51. startDegree = endDegree;
  52. endDegree = (0.737 + 0.155 + 0.048 + 0.035) * 360 - 90;
  53. drawFilledSector(ctx, 250, 250, 150, startDegree, endDegree, '#3cb217')
  54.  
  55. /* Opera - 1.1% */
  56. startDegree = endDegree;
  57. endDegree = (0.737 + 0.155 + 0.048 + 0.035 + 0.011) * 360 - 90;
  58. drawFilledSector(ctx, 250, 250, 150, startDegree, endDegree, '#339914')
  59.  
  60. /* Other */
  61. startDegree = endDegree;
  62. endDegree = 270;
  63. drawFilledSector(ctx, 250, 250, 150, startDegree, endDegree, '#2b7f11');
  64.  
  65. /* Filling Text */
  66. ctx.font = '20px Times New Roman';
  67. ctx.fillStyle = '#fff';
  68. ctx.fillText('December 2016 Browser Usage', 120, 75);
  69.  
  70. ctx.fillText('Chrome 73.7%', 195, 320);
  71.  
  72. ctx.font = '17px Times New Roman';
  73. ctx.fillText('Firefox 15.5%', 120, 230);
  74.  
  75. ctx.fillStyle = '#44cc1b';
  76. ctx.fillRect(350, 410, 15, 15);
  77. ctx.fillStyle = '#3cb217';
  78. ctx.fillRect(350, 435, 15, 15);
  79. ctx.fillStyle = '#339914';
  80. ctx.fillRect(350, 460, 15, 15);
  81. ctx.fillStyle = '#2b7f11';
  82. ctx.fillRect(350, 485, 15, 15);
  83.  
  84. ctx.font = '15px Times New Roman';
  85. ctx.fillStyle = '#fff';
  86.  
  87. ctx.fillText('IE 4.8%', 370, 423);
  88. ctx.fillText('Safari 3.5%', 370, 448);
  89. ctx.fillText('Opera 1.1%', 370, 473);
  90. ctx.fillText('Other', 370, 498);
  91. }
  92. }
  93.  
  94. </script>
  95. </body>
  96. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement