[e] (0) Add a diagram for arc(), correct a reference.

Affected topics: Canvas, HTML git-svn-id: http://svn.whatwg.org/webapps@7142 340c8d12-0b0e-0410-8428-c7bf67bfef74
whatwg · Jun 23, 2012 · c9bc604 · c9bc604
1 parent 035cff3
commit c9bc604
Show file tree

Hide file tree

Showing 4 changed files with 405 additions and 7 deletions.
diff --git a/complete.html b/complete.html
@@ -240,7 +240,7 @@
 
   <header class=head id=head><p><a class=logo href=http://www.whatwg.org/><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
    <hgroup><h1 class=allcaps>HTML</h1>
-    <h2 class="no-num no-toc">Living Standard &mdash; Last Updated 22 June 2012</h2>
+    <h2 class="no-num no-toc">Living Standard &mdash; Last Updated 23 June 2012</h2>
    </hgroup><dl><dt><strong>Web developer edition:</strong></dt>
     <dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
     <dt>Multiple-page version:</dt>
@@ -36910,7 +36910,7 @@ <h6 id=text-styles><span class=secno>4.8.11.1.4 </span>Text styles</h6>
   c.restore();
 }
 
---></dd>
+--><figure class=diagrams><!-- if anyone wants to try writing alternative text for this, be my guest. I can't work out how to describe it. --><img alt="" src=http://images.whatwg.org/arc1.png></figure></dd>
 
    <dt><var title="">context</var> . <code title=dom-context-2d-arc><a href=#dom-context-2d-arc>arc</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">radius</var>, <var title="">startAngle</var>, <var title="">endAngle</var> [, <var title="">anticlockwise</var> ] )</dt>
    <dt><var title="">path</var> . <code title=dom-context-2d-arc><a href=#dom-context-2d-arc>arc</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">radius</var>, <var title="">startAngle</var>, <var title="">endAngle</var> [, <var title="">anticlockwise</var> ] )</dt>
@@ -36926,6 +36926,136 @@ <h6 id=text-styles><span class=secno>4.8.11.1.4 </span>Text styles</h6>
     <p>Throws an <code><a href=#indexsizeerror>IndexSizeError</a></code> exception if the given
     radius is negative.</p>
 
+<!--
+c.clearRect(0, 0, 640, 480);
+c.save();
+try {
+  var x0 = 50;
+  var y0 = 200;
+  var x = 255;
+  var y = 150;
+  var radius = 100;
+  var startAngle = 2.4
+  var endAngle = 0.7;
+  var direction = false;
+
+  var bottom = 280;
+  var center = 50;
+
+  var fontSize = 16;
+  var margin = 50;
+  var dotHalfSize = 5;
+  var arrowHead = 5;
+
+  // (also update the label positions at the bottom)
+
+  // ========
+
+  function dot(x,y,s) {
+    c.beginPath();
+    c.arc(x,y,dotHalfSize,0,Math.PI*2);
+    c.fill();
+    c.textAlign = 'center';
+    c.textBaseline = 'top';
+    c.fillText(s,x,y+dotHalfSize);
+  }
+
+  function arc(x, y, r, sA, eA, d, fr, s) {
+    c.lineWidth = 1;
+    c.strokeStyle = 'red';
+    c.beginPath();
+    c.arc(x, y, r, sA, eA, d);
+    c.stroke();
+
+    c.save();
+    c.translate(x, y);
+    c.rotate(eA);
+    c.beginPath();
+    c.moveTo(r-arrowHead, arrowHead);
+    c.lineTo(r, 0);
+    c.lineTo(r+arrowHead, arrowHead);
+    c.stroke();
+
+    c.strokeStyle = 'silver';
+    c.beginPath();
+    c.moveTo(0, 0);
+    c.lineTo(fr, 0);
+    c.stroke();
+    c.restore();
+
+    c.textAlign = 'right';
+    c.textBaseline = 'middle';
+    c.fillStyle = 'black';
+    c.fillText(s + ' ',x-r,y);
+  }
+
+  function radial(x, y, length, rotation, s) {
+    c.lineWidth = 1;
+    c.strokeStyle = 'blue';
+    c.save();
+    c.translate(x, y);
+    c.rotate(rotation);
+    c.beginPath();
+    c.moveTo(0, 0);
+    c.lineTo(length, 0);
+    c.stroke();
+    c.textAlign = 'center';
+    c.textBaseline = 'top';
+    c.fillStyle = 'black';
+    c.fillText(s,length/2,0);
+    c.restore();
+  }
+
+  c.font = fontSize + 'px Gill Sans';
+
+  // construction lines
+  c.lineWidth = 1;
+  c.strokeStyle = 'silver';
+  // circle
+  c.beginPath();
+  c.arc(x, y, radius, 0, 2*Math.PI);
+  c.stroke();
+  // angles
+  arc(x, y, 2*radius/3, 0, startAngle, true, radius, '\u03B1');
+  arc(x, y, radius/3, 0, endAngle, true, radius, '\u03B2');
+  // radii
+  radial(x, y, radius, 0, 'radius');
+
+  // the line
+  c.lineWidth = 15;
+  c.lineCap = 'round';
+  c.strokeStyle = 'rgba(20,200,40,0.8)';
+  c.beginPath();
+  c.moveTo(x0,y0);
+  c.arc(x,y,radius,startAngle,endAngle,direction);
+  c.stroke();
+
+  dot(x0,y0, "x\u2080,y\u2080");
+  dot(x,y, "x,y");
+
+  c.textAlign = 'left';
+  c.textBaseline = 'alphabetic';
+  var L = 0;
+
+  function print(s) {
+    c.fillText(s, center, bottom+L*fontSize*1.3);
+    L += 1;
+  }
+  print('// the thick line corresponds to:');
+  print('context.moveTo(x\u2080, y\u2080)');
+  print('context.arc(x, y, radius, \u03B1, \u03B2)');
+  print('context.stroke()');
+
+  c.fillStyle = 'green';
+  c.fillText("\u25be initial line", x0, y0-fontSize);
+  c.textAlign = 'center';
+  c.fillText("\u25be arc", x, y-radius-fontSize);
+
+} finally {
+  c.restore();
+}
+-->
+
    </dd>
 
    <dt><var title="">context</var> . <code title=dom-context-2d-ellipse><a href=#dom-context-2d-ellipse>ellipse</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">radiusX</var>, <var title="">radiusY</var>, <var title="">rotation</var>, <var title="">startAngle</var>, <var title="">endAngle</var>, <var title="">anticlockwise</var>)</dt>
@@ -102436,7 +102566,7 @@ <h3 class="no-num">Reflecting IDL attributes</h3>
    Message Header Field Names</a></cite>. IANA.</dd>
 
    <dt id=refsISO8601>[ISO8601]</dt>
-   <dd><cite><a href="http://isotc.iso.org/livelink/livelink/4021199/ISO_8601_2004_E.zip?func=doc.Fetch&amp;nodeid=4021199">ISO8601: Data elements and interchange formats &mdash; Information interchange &mdash; Representation of dates and times</a></cite>. ISO.</dd>
+   <dd>(Non-normative) <cite><a href="http://isotc.iso.org/livelink/livelink/4021199/ISO_8601_2004_E.zip?func=doc.Fetch&amp;nodeid=4021199">ISO8601: Data elements and interchange formats &mdash; Information interchange &mdash; Representation of dates and times</a></cite>. ISO.</dd>
 
    <dt id=refsISO885911>[ISO885911]</dt>
    <dd><cite><a href=http://std.dkuug.dk/jtc1/sc2/open/02n3333.pdf>ISO-8859-11:
@@ -103165,6 +103295,7 @@ <h3 class="no-num">Reflecting IDL attributes</h3>
   John Harding,
   John Keiser,
   John Snyders,
+  John Stockton,
   John-Mark Bell,
   Johnny Stenback,
   Jon Ferraiolo,

diff --git a/images/arc1.png b/images/arc1.png
diff --git a/index b/index
@@ -240,7 +240,7 @@
 
   <header class=head id=head><p><a class=logo href=http://www.whatwg.org/><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
    <hgroup><h1 class=allcaps>HTML</h1>
-    <h2 class="no-num no-toc">Living Standard &mdash; Last Updated 22 June 2012</h2>
+    <h2 class="no-num no-toc">Living Standard &mdash; Last Updated 23 June 2012</h2>
    </hgroup><dl><dt><strong>Web developer edition:</strong></dt>
     <dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
     <dt>Multiple-page version:</dt>
@@ -36910,7 +36910,7 @@ try {
   c.restore();
 }
 
---></dd>
+--><figure class=diagrams><!-- if anyone wants to try writing alternative text for this, be my guest. I can't work out how to describe it. --><img alt="" src=http://images.whatwg.org/arc1.png></figure></dd>
 
    <dt><var title="">context</var> . <code title=dom-context-2d-arc><a href=#dom-context-2d-arc>arc</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">radius</var>, <var title="">startAngle</var>, <var title="">endAngle</var> [, <var title="">anticlockwise</var> ] )</dt>
    <dt><var title="">path</var> . <code title=dom-context-2d-arc><a href=#dom-context-2d-arc>arc</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">radius</var>, <var title="">startAngle</var>, <var title="">endAngle</var> [, <var title="">anticlockwise</var> ] )</dt>
@@ -36926,6 +36926,136 @@ try {
     <p>Throws an <code><a href=#indexsizeerror>IndexSizeError</a></code> exception if the given
     radius is negative.</p>
 
+<!--
+c.clearRect(0, 0, 640, 480);
+c.save();
+try {
+  var x0 = 50;
+  var y0 = 200;
+  var x = 255;
+  var y = 150;
+  var radius = 100;
+  var startAngle = 2.4
+  var endAngle = 0.7;
+  var direction = false;
+
+  var bottom = 280;
+  var center = 50;
+
+  var fontSize = 16;
+  var margin = 50;
+  var dotHalfSize = 5;
+  var arrowHead = 5;
+
+  // (also update the label positions at the bottom)
+
+  // ========
+
+  function dot(x,y,s) {
+    c.beginPath();
+    c.arc(x,y,dotHalfSize,0,Math.PI*2);
+    c.fill();
+    c.textAlign = 'center';
+    c.textBaseline = 'top';
+    c.fillText(s,x,y+dotHalfSize);
+  }
+
+  function arc(x, y, r, sA, eA, d, fr, s) {
+    c.lineWidth = 1;
+    c.strokeStyle = 'red';
+    c.beginPath();
+    c.arc(x, y, r, sA, eA, d);
+    c.stroke();
+
+    c.save();
+    c.translate(x, y);
+    c.rotate(eA);
+    c.beginPath();
+    c.moveTo(r-arrowHead, arrowHead);
+    c.lineTo(r, 0);
+    c.lineTo(r+arrowHead, arrowHead);
+    c.stroke();
+
+    c.strokeStyle = 'silver';
+    c.beginPath();
+    c.moveTo(0, 0);
+    c.lineTo(fr, 0);
+    c.stroke();
+    c.restore();
+
+    c.textAlign = 'right';
+    c.textBaseline = 'middle';
+    c.fillStyle = 'black';
+    c.fillText(s + ' ',x-r,y);
+  }
+
+  function radial(x, y, length, rotation, s) {
+    c.lineWidth = 1;
+    c.strokeStyle = 'blue';
+    c.save();
+    c.translate(x, y);
+    c.rotate(rotation);
+    c.beginPath();
+    c.moveTo(0, 0);
+    c.lineTo(length, 0);
+    c.stroke();
+    c.textAlign = 'center';
+    c.textBaseline = 'top';
+    c.fillStyle = 'black';
+    c.fillText(s,length/2,0);
+    c.restore();
+  }
+
+  c.font = fontSize + 'px Gill Sans';
+
+  // construction lines
+  c.lineWidth = 1;
+  c.strokeStyle = 'silver';
+  // circle
+  c.beginPath();
+  c.arc(x, y, radius, 0, 2*Math.PI);
+  c.stroke();
+  // angles
+  arc(x, y, 2*radius/3, 0, startAngle, true, radius, '\u03B1');
+  arc(x, y, radius/3, 0, endAngle, true, radius, '\u03B2');
+  // radii
+  radial(x, y, radius, 0, 'radius');
+
+  // the line
+  c.lineWidth = 15;
+  c.lineCap = 'round';
+  c.strokeStyle = 'rgba(20,200,40,0.8)';
+  c.beginPath();
+  c.moveTo(x0,y0);
+  c.arc(x,y,radius,startAngle,endAngle,direction);
+  c.stroke();
+
+  dot(x0,y0, "x\u2080,y\u2080");
+  dot(x,y, "x,y");
+
+  c.textAlign = 'left';
+  c.textBaseline = 'alphabetic';
+  var L = 0;
+
+  function print(s) {
+    c.fillText(s, center, bottom+L*fontSize*1.3);
+    L += 1;
+  }
+  print('// the thick line corresponds to:');
+  print('context.moveTo(x\u2080, y\u2080)');
+  print('context.arc(x, y, radius, \u03B1, \u03B2)');
+  print('context.stroke()');
+
+  c.fillStyle = 'green';
+  c.fillText("\u25be initial line", x0, y0-fontSize);
+  c.textAlign = 'center';
+  c.fillText("\u25be arc", x, y-radius-fontSize);
+
+} finally {
+  c.restore();
+}
+-->
+
    </dd>
 
    <dt><var title="">context</var> . <code title=dom-context-2d-ellipse><a href=#dom-context-2d-ellipse>ellipse</a></code>(<var title="">x</var>, <var title="">y</var>, <var title="">radiusX</var>, <var title="">radiusY</var>, <var title="">rotation</var>, <var title="">startAngle</var>, <var title="">endAngle</var>, <var title="">anticlockwise</var>)</dt>
@@ -102436,7 +102566,7 @@ if (s = prompt('What is your name?')) {
    Message Header Field Names</a></cite>. IANA.</dd>
 
    <dt id=refsISO8601>[ISO8601]</dt>
-   <dd><cite><a href="http://isotc.iso.org/livelink/livelink/4021199/ISO_8601_2004_E.zip?func=doc.Fetch&amp;nodeid=4021199">ISO8601: Data elements and interchange formats &mdash; Information interchange &mdash; Representation of dates and times</a></cite>. ISO.</dd>
+   <dd>(Non-normative) <cite><a href="http://isotc.iso.org/livelink/livelink/4021199/ISO_8601_2004_E.zip?func=doc.Fetch&amp;nodeid=4021199">ISO8601: Data elements and interchange formats &mdash; Information interchange &mdash; Representation of dates and times</a></cite>. ISO.</dd>
 
    <dt id=refsISO885911>[ISO885911]</dt>
    <dd><cite><a href=http://std.dkuug.dk/jtc1/sc2/open/02n3333.pdf>ISO-8859-11:
@@ -103165,6 +103295,7 @@ if (s = prompt('What is your name?')) {
   John Harding,
   John Keiser,
   John Snyders,
+  John Stockton,
   John-Mark Bell,
   Johnny Stenback,
   Jon Ferraiolo,