[html5] r7144 - / images
whatwg at whatwg.org
whatwg at whatwg.org
Sat Jun 23 13:32:29 PDT 2012
Author: ianh
Date: 2012-06-23 13:32:27 -0700 (Sat, 23 Jun 2012)
New Revision: 7144
Modified:
complete.html
images/arc1.png
index
source
Log:
[giow] (0) fix the definition of ellipse() and arcTo(), and fix the dialgram for arc().
Affected topics: Canvas
Modified: complete.html
===================================================================
--- complete.html 2012-06-23 00:58:45 UTC (rev 7143)
+++ complete.html 2012-06-23 20:32:27 UTC (rev 7144)
@@ -36768,7 +36768,7 @@
arc's ellipse, and the second controls the height. If only one is
provided, or if they are the same, the arc is from a circle. In
the case of an ellipse, the rotation argument controls the
- anti-clockwise inclination of the ellipse relative to the x-axis.</p>
+ clockwise inclination of the ellipse relative to the x-axis.</p>
<p>Throws an <code><a href=#indexsizeerror>IndexSizeError</a></code> exception if the given
radius is negative.</p>
@@ -36910,7 +36910,7 @@
c.restore();
}
---><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>
+--></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,7 +36926,8 @@
<p>Throws an <code><a href=#indexsizeerror>IndexSizeError</a></code> exception if the given
radius is negative.</p>
-<!--
+ <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><!--
+
c.clearRect(0, 0, 640, 480);
c.save();
try {
@@ -36935,12 +36936,12 @@
var x = 255;
var y = 150;
var radius = 100;
- var startAngle = 2.4
- var endAngle = 0.7;
+ var startAngle = 2.0;
+ var endAngle = 5.7;
var direction = false;
- var bottom = 280;
- var center = 50;
+ var bottom = 110;
+ var center = 380;
var fontSize = 16;
var margin = 50;
@@ -36971,11 +36972,10 @@
c.translate(x, y);
c.rotate(eA);
c.beginPath();
- c.moveTo(r-arrowHead, arrowHead);
+ c.moveTo(r-arrowHead, d?arrowHead:-arrowHead);
c.lineTo(r, 0);
- c.lineTo(r+arrowHead, arrowHead);
+ c.lineTo(r+arrowHead, d?arrowHead:-arrowHead);
c.stroke();
-
c.strokeStyle = 'silver';
c.beginPath();
c.moveTo(0, 0);
@@ -36983,10 +36983,26 @@
c.stroke();
c.restore();
- c.textAlign = 'right';
- c.textBaseline = 'middle';
c.fillStyle = 'black';
- c.fillText(s + ' ',x-r,y);
+ if (eA<Math.PI) {
+ c.save();
+ c.translate(x, y);
+ c.rotate(sA+(eA-sA)/2-Math.PI/2);
+ c.translate(0, r);
+ c.rotate(-(sA+(eA-sA)/2-Math.PI/2));
+ c.beginPath();
+ c.textAlign = 'center';
+ c.textBaseline = 'bottom';
+ c.fillText(s + ' ',0,0);
+ c.restore();
+ } else {
+ c.save();
+ c.beginPath();
+ c.textAlign = 'left';
+ c.textBaseline = 'middle';
+ c.fillText(' ' + s,x-r,y);
+ c.restore();
+ }
}
function radial(x, y, length, rotation, s) {
@@ -37000,7 +37016,7 @@
c.lineTo(length, 0);
c.stroke();
c.textAlign = 'center';
- c.textBaseline = 'top';
+ c.textBaseline = 'bottom';
c.fillStyle = 'black';
c.fillText(s,length/2,0);
c.restore();
@@ -37016,8 +37032,8 @@
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');
+ arc(x, y, radius/10+2*radius/3, 0, startAngle, false, radius, '\u03B1');
+ arc(x, y, radius/10+radius/3, 0, endAngle, false, radius, '\u03B2');
// radii
radial(x, y, radius, 0, 'radius');
@@ -37047,17 +37063,19 @@
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);
+ c.textBaseline = 'top';
+ c.fillText("initial line \u25b4", x0+20, y0+fontSize*2);
+
+ c.textAlign = 'right';
+ c.textBaseline = 'middle';
+ c.fillText("arc \u25b8", x-radius-15, y);
+
} finally {
c.restore();
}
--->
+--></dd>
- </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>
<dt><var title="">path</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>
@@ -37176,11 +37194,11 @@
<p>Otherwise, let <var title="">The Arc</var> be the shortest arc
given by circumference of the ellipse that has radius <var title="">radiusX</var> on the major axis and radius <var title="">radiusY</var> on the minor axis, and whose semi-major axis
- is rotated <var title="">rotation</var> radians anti-clockwise from
- the positive x-axis, and that has one point tangent to the
- half-infinite line that crosses the point (<var title="">x0</var>,
- <var title="">y0</var>) and ends at the point (<var title="">x1</var>, <var title="">y1</var>), and that has a different
- point tangent to the half-infinite line that ends at the point (<var title="">x1</var>, <var title="">y1</var>) and crosses the point
+ is rotated <var title="">rotation</var> radians clockwise from the
+ positive x-axis, and that has one point tangent to the half-infinite
+ line that crosses the point (<var title="">x0</var>, <var title="">y0</var>) and ends at the point (<var title="">x1</var>,
+ <var title="">y1</var>), and that has a different point tangent to
+ the half-infinite line that ends at the point (<var title="">x1</var>, <var title="">y1</var>) and crosses the point
(<var title="">x2</var>, <var title="">y2</var>). The points at
which this ellipse touches these two lines are called the start and
end tangent points respectively. The method must connect the point
@@ -37213,8 +37231,8 @@
<p>Consider an ellipse that has its origin at (<var title="">x</var>, <var title="">y</var>), that has a major-axis
radius <var title="">radiusX</var> and a minor-axis radius <var title="">radiusY</var>, and that is rotated about its origin such
- that its semi-major axis is inclined <var title="">angle</var>
- radians anti-clockwise from the x-axis. The points at <var title="">startAngle</var> and <var title="">endAngle</var> along
+ that its semi-major axis is inclined <var title="">rotation</var>
+ radians clockwise from the x-axis. The points at <var title="">startAngle</var> and <var title="">endAngle</var> along
this circle's circumference, measured in radians clockwise from the
ellipse's semi-major axis, are the start and end points
respectively.</p>
Modified: images/arc1.png
===================================================================
(Binary files differ)
Modified: index
===================================================================
--- index 2012-06-23 00:58:45 UTC (rev 7143)
+++ index 2012-06-23 20:32:27 UTC (rev 7144)
@@ -36768,7 +36768,7 @@
arc's ellipse, and the second controls the height. If only one is
provided, or if they are the same, the arc is from a circle. In
the case of an ellipse, the rotation argument controls the
- anti-clockwise inclination of the ellipse relative to the x-axis.</p>
+ clockwise inclination of the ellipse relative to the x-axis.</p>
<p>Throws an <code><a href=#indexsizeerror>IndexSizeError</a></code> exception if the given
radius is negative.</p>
@@ -36910,7 +36910,7 @@
c.restore();
}
---><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>
+--></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,7 +36926,8 @@
<p>Throws an <code><a href=#indexsizeerror>IndexSizeError</a></code> exception if the given
radius is negative.</p>
-<!--
+ <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><!--
+
c.clearRect(0, 0, 640, 480);
c.save();
try {
@@ -36935,12 +36936,12 @@
var x = 255;
var y = 150;
var radius = 100;
- var startAngle = 2.4
- var endAngle = 0.7;
+ var startAngle = 2.0;
+ var endAngle = 5.7;
var direction = false;
- var bottom = 280;
- var center = 50;
+ var bottom = 110;
+ var center = 380;
var fontSize = 16;
var margin = 50;
@@ -36971,11 +36972,10 @@
c.translate(x, y);
c.rotate(eA);
c.beginPath();
- c.moveTo(r-arrowHead, arrowHead);
+ c.moveTo(r-arrowHead, d?arrowHead:-arrowHead);
c.lineTo(r, 0);
- c.lineTo(r+arrowHead, arrowHead);
+ c.lineTo(r+arrowHead, d?arrowHead:-arrowHead);
c.stroke();
-
c.strokeStyle = 'silver';
c.beginPath();
c.moveTo(0, 0);
@@ -36983,10 +36983,26 @@
c.stroke();
c.restore();
- c.textAlign = 'right';
- c.textBaseline = 'middle';
c.fillStyle = 'black';
- c.fillText(s + ' ',x-r,y);
+ if (eA<Math.PI) {
+ c.save();
+ c.translate(x, y);
+ c.rotate(sA+(eA-sA)/2-Math.PI/2);
+ c.translate(0, r);
+ c.rotate(-(sA+(eA-sA)/2-Math.PI/2));
+ c.beginPath();
+ c.textAlign = 'center';
+ c.textBaseline = 'bottom';
+ c.fillText(s + ' ',0,0);
+ c.restore();
+ } else {
+ c.save();
+ c.beginPath();
+ c.textAlign = 'left';
+ c.textBaseline = 'middle';
+ c.fillText(' ' + s,x-r,y);
+ c.restore();
+ }
}
function radial(x, y, length, rotation, s) {
@@ -37000,7 +37016,7 @@
c.lineTo(length, 0);
c.stroke();
c.textAlign = 'center';
- c.textBaseline = 'top';
+ c.textBaseline = 'bottom';
c.fillStyle = 'black';
c.fillText(s,length/2,0);
c.restore();
@@ -37016,8 +37032,8 @@
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');
+ arc(x, y, radius/10+2*radius/3, 0, startAngle, false, radius, '\u03B1');
+ arc(x, y, radius/10+radius/3, 0, endAngle, false, radius, '\u03B2');
// radii
radial(x, y, radius, 0, 'radius');
@@ -37047,17 +37063,19 @@
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);
+ c.textBaseline = 'top';
+ c.fillText("initial line \u25b4", x0+20, y0+fontSize*2);
+
+ c.textAlign = 'right';
+ c.textBaseline = 'middle';
+ c.fillText("arc \u25b8", x-radius-15, y);
+
} finally {
c.restore();
}
--->
+--></dd>
- </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>
<dt><var title="">path</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>
@@ -37176,11 +37194,11 @@
<p>Otherwise, let <var title="">The Arc</var> be the shortest arc
given by circumference of the ellipse that has radius <var title="">radiusX</var> on the major axis and radius <var title="">radiusY</var> on the minor axis, and whose semi-major axis
- is rotated <var title="">rotation</var> radians anti-clockwise from
- the positive x-axis, and that has one point tangent to the
- half-infinite line that crosses the point (<var title="">x0</var>,
- <var title="">y0</var>) and ends at the point (<var title="">x1</var>, <var title="">y1</var>), and that has a different
- point tangent to the half-infinite line that ends at the point (<var title="">x1</var>, <var title="">y1</var>) and crosses the point
+ is rotated <var title="">rotation</var> radians clockwise from the
+ positive x-axis, and that has one point tangent to the half-infinite
+ line that crosses the point (<var title="">x0</var>, <var title="">y0</var>) and ends at the point (<var title="">x1</var>,
+ <var title="">y1</var>), and that has a different point tangent to
+ the half-infinite line that ends at the point (<var title="">x1</var>, <var title="">y1</var>) and crosses the point
(<var title="">x2</var>, <var title="">y2</var>). The points at
which this ellipse touches these two lines are called the start and
end tangent points respectively. The method must connect the point
@@ -37213,8 +37231,8 @@
<p>Consider an ellipse that has its origin at (<var title="">x</var>, <var title="">y</var>), that has a major-axis
radius <var title="">radiusX</var> and a minor-axis radius <var title="">radiusY</var>, and that is rotated about its origin such
- that its semi-major axis is inclined <var title="">angle</var>
- radians anti-clockwise from the x-axis. The points at <var title="">startAngle</var> and <var title="">endAngle</var> along
+ that its semi-major axis is inclined <var title="">rotation</var>
+ radians clockwise from the x-axis. The points at <var title="">startAngle</var> and <var title="">endAngle</var> along
this circle's circumference, measured in radians clockwise from the
ellipse's semi-major axis, are the start and end points
respectively.</p>
Modified: source
===================================================================
--- source 2012-06-23 00:58:45 UTC (rev 7143)
+++ source 2012-06-23 20:32:27 UTC (rev 7144)
@@ -42829,7 +42829,7 @@
arc's ellipse, and the second controls the height. If only one is
provided, or if they are the same, the arc is from a circle. In
the case of an ellipse, the rotation argument controls the
- anti-clockwise inclination of the ellipse relative to the x-axis.</p>
+ clockwise inclination of the ellipse relative to the x-axis.</p>
<p>Throws an <code>IndexSizeError</code> exception if the given
radius is negative.</p>
@@ -42980,11 +42980,6 @@
-->
- <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>
@@ -43001,7 +42996,13 @@
<p>Throws an <code>IndexSizeError</code> exception if the given
radius is negative.</p>
+ <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>
+
<!--
+
c.clearRect(0, 0, 640, 480);
c.save();
try {
@@ -43010,12 +43011,12 @@
var x = 255;
var y = 150;
var radius = 100;
- var startAngle = 2.4
- var endAngle = 0.7;
+ var startAngle = 2.0;
+ var endAngle = 5.7;
var direction = false;
- var bottom = 280;
- var center = 50;
+ var bottom = 110;
+ var center = 380;
var fontSize = 16;
var margin = 50;
@@ -43046,11 +43047,10 @@
c.translate(x, y);
c.rotate(eA);
c.beginPath();
- c.moveTo(r-arrowHead, arrowHead);
+ c.moveTo(r-arrowHead, d?arrowHead:-arrowHead);
c.lineTo(r, 0);
- c.lineTo(r+arrowHead, arrowHead);
+ c.lineTo(r+arrowHead, d?arrowHead:-arrowHead);
c.stroke();
-
c.strokeStyle = 'silver';
c.beginPath();
c.moveTo(0, 0);
@@ -43058,10 +43058,26 @@
c.stroke();
c.restore();
- c.textAlign = 'right';
- c.textBaseline = 'middle';
c.fillStyle = 'black';
- c.fillText(s + ' ',x-r,y);
+ if (eA<Math.PI) {
+ c.save();
+ c.translate(x, y);
+ c.rotate(sA+(eA-sA)/2-Math.PI/2);
+ c.translate(0, r);
+ c.rotate(-(sA+(eA-sA)/2-Math.PI/2));
+ c.beginPath();
+ c.textAlign = 'center';
+ c.textBaseline = 'bottom';
+ c.fillText(s + ' ',0,0);
+ c.restore();
+ } else {
+ c.save();
+ c.beginPath();
+ c.textAlign = 'left';
+ c.textBaseline = 'middle';
+ c.fillText(' ' + s,x-r,y);
+ c.restore();
+ }
}
function radial(x, y, length, rotation, s) {
@@ -43075,7 +43091,7 @@
c.lineTo(length, 0);
c.stroke();
c.textAlign = 'center';
- c.textBaseline = 'top';
+ c.textBaseline = 'bottom';
c.fillStyle = 'black';
c.fillText(s,length/2,0);
c.restore();
@@ -43091,8 +43107,8 @@
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');
+ arc(x, y, radius/10+2*radius/3, 0, startAngle, false, radius, '\u03B1');
+ arc(x, y, radius/10+radius/3, 0, endAngle, false, radius, '\u03B2');
// radii
radial(x, y, radius, 0, 'radius');
@@ -43122,10 +43138,14 @@
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);
+ c.textBaseline = 'top';
+ c.fillText("initial line \u25b4", x0+20, y0+fontSize*2);
+
+ c.textAlign = 'right';
+ c.textBaseline = 'middle';
+ c.fillText("arc \u25b8", x-radius-15, y);
+
} finally {
c.restore();
}
@@ -43291,12 +43311,12 @@
given by circumference of the ellipse that has radius <var
title="">radiusX</var> on the major axis and radius <var
title="">radiusY</var> on the minor axis, and whose semi-major axis
- is rotated <var title="">rotation</var> radians anti-clockwise from
- the positive x-axis, and that has one point tangent to the
- half-infinite line that crosses the point (<var title="">x0</var>,
- <var title="">y0</var>) and ends at the point (<var
- title="">x1</var>, <var title="">y1</var>), and that has a different
- point tangent to the half-infinite line that ends at the point (<var
+ is rotated <var title="">rotation</var> radians clockwise from the
+ positive x-axis, and that has one point tangent to the half-infinite
+ line that crosses the point (<var title="">x0</var>, <var
+ title="">y0</var>) and ends at the point (<var title="">x1</var>,
+ <var title="">y1</var>), and that has a different point tangent to
+ the half-infinite line that ends at the point (<var
title="">x1</var>, <var title="">y1</var>) and crosses the point
(<var title="">x2</var>, <var title="">y2</var>). The points at
which this ellipse touches these two lines are called the start and
@@ -43344,8 +43364,8 @@
title="">x</var>, <var title="">y</var>), that has a major-axis
radius <var title="">radiusX</var> and a minor-axis radius <var
title="">radiusY</var>, and that is rotated about its origin such
- that its semi-major axis is inclined <var title="">angle</var>
- radians anti-clockwise from the x-axis. The points at <var
+ that its semi-major axis is inclined <var title="">rotation</var>
+ radians clockwise from the x-axis. The points at <var
title="">startAngle</var> and <var title="">endAngle</var> along
this circle's circumference, measured in radians clockwise from the
ellipse's semi-major axis, are the start and end points
More information about the Commit-Watchers
mailing list