Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Canvas Tutorial</title>
- <style type="text/css">
- body, html, #wrapper { width: 100%; height: 100%; }
- #wrapper { display: table }
- #main { display: table-cell; vertical-align: middle; text-align:center; }
- </style>
- </head>
- <body style="background-color: #333;" onload="draw()">
- <div id="wrapper">
- <div id="main">
- <canvas id="main-canvas" width="500" height="500"></canvas>
- </div>
- </div>
- <script>
- function degToRad(degree) { return degree / 180 * Math.PI; };
- function drawFilledSector(ctxObject, centerX, centerY, radius, startDegree, endDegree, style) {
- ctxObject.fillStyle = style;
- ctxObject.beginPath();
- ctxObject.arc(centerX, centerY, radius, degToRad(startDegree), degToRad(endDegree));
- ctxObject.lineTo(centerX, centerY);
- ctxObject.fill();
- }
- function draw() {
- var canvasElement = document.getElementById('main-canvas');
- if (canvasElement.getContext('2d')) {
- /* Examples of drawing pie chart - Most Popular Browser Statistics in December 2016 */
- var ctx = canvasElement.getContext('2d');
- var startRadian, endRadian;
- /* Chrome - 73.7% */
- startDegree = 270;
- endDegree = 0.737 * 360 - 90;
- drawFilledSector(ctx, 250, 250, 150, startDegree, endDegree, '#56ff22')
- /* Firefox - 15.5% */
- startDegree = endDegree;
- endDegree = (0.737 + 0.155) * 360 - 90;
- drawFilledSector(ctx, 250, 250, 150, startDegree, endDegree, '#4de51e')
- /* IE - 4.8% */
- startDegree = endDegree;
- endDegree = (0.737 + 0.155 + 0.048) * 360 - 90;
- drawFilledSector(ctx, 250, 250, 150, startDegree, endDegree, '#44cc1b')
- /* Safari - 3.5% */
- startDegree = endDegree;
- endDegree = (0.737 + 0.155 + 0.048 + 0.035) * 360 - 90;
- drawFilledSector(ctx, 250, 250, 150, startDegree, endDegree, '#3cb217')
- /* Opera - 1.1% */
- startDegree = endDegree;
- endDegree = (0.737 + 0.155 + 0.048 + 0.035 + 0.011) * 360 - 90;
- drawFilledSector(ctx, 250, 250, 150, startDegree, endDegree, '#339914')
- /* Other */
- startDegree = endDegree;
- endDegree = 270;
- drawFilledSector(ctx, 250, 250, 150, startDegree, endDegree, '#2b7f11');
- /* Filling Text */
- ctx.font = '20px Times New Roman';
- ctx.fillStyle = '#fff';
- ctx.fillText('December 2016 Browser Usage', 120, 75);
- ctx.fillText('Chrome 73.7%', 195, 320);
- ctx.font = '17px Times New Roman';
- ctx.fillText('Firefox 15.5%', 120, 230);
- ctx.fillStyle = '#44cc1b';
- ctx.fillRect(350, 410, 15, 15);
- ctx.fillStyle = '#3cb217';
- ctx.fillRect(350, 435, 15, 15);
- ctx.fillStyle = '#339914';
- ctx.fillRect(350, 460, 15, 15);
- ctx.fillStyle = '#2b7f11';
- ctx.fillRect(350, 485, 15, 15);
- ctx.font = '15px Times New Roman';
- ctx.fillStyle = '#fff';
- ctx.fillText('IE 4.8%', 370, 423);
- ctx.fillText('Safari 3.5%', 370, 448);
- ctx.fillText('Opera 1.1%', 370, 473);
- ctx.fillText('Other', 370, 498);
- }
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement