third_party/WebKit/LayoutTests/fast/canvas/canvas-ellipse-circumference.html

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