third_party/WebKit/LayoutTests/fast/canvas/canvas-arc-circumference-fill.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head></head>
   4 <body>
   5 <canvas id="mycanvas" width="600" height="400"></canvas>
   6 <script>
   7 if (window.testRunner)
   8     testRunner.dumpAsTextWithPixelResults();
   9
  10 var canvas = document.getElementById('mycanvas');
  11 var ctx = canvas.getContext('2d');
  12 ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
  13
  14 // 20 angles.
  15 var sweepAngles = [
  16     -123.7, -2.3, -2, -1, -0.3, -0.000001, 0, 0.000001, 0.3, 0.7,
  17     1, 1.3, 1.5, 1.7, 1.99999, 2, 2.00001, 2.3, 4.3, 3934723942837.3
  18 ];
  19 for (var i = 0; i < sweepAngles.length; i++) {
  20     sweepAngles[i] = sweepAngles[i] * Math.PI;
  21 }
  22
  23 var startAngles = [
  24     -1, -0.5, 0, 0.5
  25 ]
  26 for (var i = 0; i < startAngles.length; i++) {
  27     startAngles[i] = startAngles[i] * Math.PI;
  28 }
  29
  30 var startAngle = 0;
  31 var anticlockwise = false;
  32 var sign = 1;
  33 for (var i = 0; i < startAngles.length * 2; i++) {
  34     if (i == startAngles.length) {
  35         anticlockwise = true;
  36         sign = -1;
  37     }
  38     startAngle = startAngles[i % startAngles.length] * sign;
  39     ctx.save();
  40     for (var j = 0; j < sweepAngles.length; j++) {
  41         ctx.save();
  42         ctx.beginPath();
  43         ctx.moveTo(0, 2);
  44         ctx.arc(18, 15, 10, startAngle, startAngle + (sweepAngles[j] * sign), anticlockwise);
  45         ctx.lineTo(0, 28);
  46         ctx.fill();
  47         ctx.restore();
  48         ctx.translate(30, 0);
  49     }
  50     ctx.restore();
  51     ctx.translate(0, 40);
  52 }
  53
  54 </script>
  55 </body>
  56 </html>
  57