[html5] r7142 - / images
whatwg at whatwg.org
whatwg at whatwg.org
Fri Jun 22 17:56:16 PDT 2012
Author: ianh
Date: 2012-06-22 17:56:15 -0700 (Fri, 22 Jun 2012)
New Revision: 7142
Added:
images/arc1.png
Modified:
complete.html
index
source
Log:
[e] (0) Add a diagram for arc(), correct a reference.
Affected topics: Canvas, HTML
Modified: complete.html
===================================================================
--- complete.html 2012-06-22 22:37:01 UTC (rev 7141)
+++ complete.html 2012-06-23 00:56:15 UTC (rev 7142)
@@ -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 — Last Updated 22 June 2012</h2>
+ <h2 class="no-num no-toc">Living Standard — 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 @@
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 @@
<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 @@
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&nodeid=4021199">ISO8601: Data elements and interchange formats — Information interchange — 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&nodeid=4021199">ISO8601: Data elements and interchange formats — Information interchange — 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 @@
John Harding,
John Keiser,
John Snyders,
+ John Stockton,
John-Mark Bell,
Johnny Stenback,
Jon Ferraiolo,
Added: images/arc1.png
===================================================================
(Binary files differ)
Property changes on: images/arc1.png
___________________________________________________________________
Added: svn:mime-type
+ application/octet-stream
Modified: index
===================================================================
--- index 2012-06-22 22:37:01 UTC (rev 7141)
+++ index 2012-06-23 00:56:15 UTC (rev 7142)
@@ -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 — Last Updated 22 June 2012</h2>
+ <h2 class="no-num no-toc">Living Standard — 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 @@
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 @@
<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 @@
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&nodeid=4021199">ISO8601: Data elements and interchange formats — Information interchange — 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&nodeid=4021199">ISO8601: Data elements and interchange formats — Information interchange — 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 @@
John Harding,
John Keiser,
John Snyders,
+ John Stockton,
John-Mark Bell,
Johnny Stenback,
Jon Ferraiolo,
Modified: source
===================================================================
--- source 2012-06-22 22:37:01 UTC (rev 7141)
+++ source 2012-06-23 00:56:15 UTC (rev 7142)
@@ -42980,6 +42980,11 @@
-->
+ <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 src="images/arc1.png" alt="">
+ </figure>
+
</dd>
<dt><var title="">context</var> . <code title="dom-context-2d-arc">arc</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>
@@ -42996,6 +43001,136 @@
<p>Throws an <code>IndexSizeError</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">ellipse</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>
@@ -120170,7 +120305,7 @@
Standard for Floating-Point Arithmetic (IEEE 754)</a></cite>. IEEE. ISBN 978-0-7381-5753-5.</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&nodeid=4021199">ISO8601: Data elements and interchange formats — Information interchange — 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&nodeid=4021199">ISO8601: Data elements and interchange formats — Information interchange — 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:
@@ -121041,6 +121176,7 @@
John Harding,
John Keiser,
John Snyders,
+ John Stockton,
John-Mark Bell,
Johnny Stenback,
Jon Ferraiolo,
More information about the Commit-Watchers
mailing list