- From: Sam Ruby via cvs-syncmail <cvsmail@w3.org>
- Date: Thu, 18 Oct 2012 22:13:19 +0000
- To: public-html-commits@w3.org
Update of /sources/public/html5/2dcontext
In directory hutz:/tmp/cvs-serv22627
Modified Files:
Overview.html
Log Message:
commit 7bd894be67fb2ee2e93dd7d2a6fa830734d0fc5f
Author: Jay Munro <jaymunro@microsoft.com>
Date: Thu Oct 18 14:56:51 2012 -0700
Re-applied ellipse per issue-201
re-applied ellipse feature to canvas.
Index: Overview.html
===================================================================
RCS file: /sources/public/html5/2dcontext/Overview.html,v
retrieving revision 1.186
retrieving revision 1.187
diff -u -d -r1.186 -r1.187
--- Overview.html 18 Oct 2012 21:43:12 -0000 1.186
+++ Overview.html 18 Oct 2012 22:13:17 -0000 1.187
@@ -757,7 +757,8 @@
void <a href="#dom-context-2d-arcto" title="dom-context-2d-arcTo">arcTo</a>(unrestricted double x1, unrestricted double y1, unrestricted double x2, unrestricted double y2, unrestricted double radius); <!-- see ARC-ORDER note below -->
void <a href="#dom-context-2d-rect" title="dom-context-2d-rect">rect</a>(unrestricted double x, unrestricted double y, unrestricted double w, unrestricted double h);
void <a href="#dom-context-2d-arc" title="dom-context-2d-arc">arc</a>(unrestricted double x, unrestricted double y, unrestricted double radius, unrestricted double startAngle, unrestricted double endAngle, optional boolean anticlockwise = false); <!-- see ARC-ORDER note below -->
-};
+ void <a href="#dom-context-2d-ellipse" title="dom-context-2d-ellipse">ellipse</a>(unrestricted double x, unrestricted double y, unrestricted double radiusX, unrestricted double radiusY, unrestricted double rotation, unrestricted double startAngle, unrestricted double endAngle, boolean anticlockwise); <!-- see ARC-ORDER note below -->
+ };
interface <dfn id="canvasgradient">CanvasGradient</dfn> {
// opaque object
@@ -769,6 +770,7 @@
};
interface <dfn id="textmetrics">TextMetrics</dfn> {
+ // x-direction
readonly attribute double <a href="#dom-textmetrics-width" title="dom-textmetrics-width">width</a>;
};
@@ -1939,6 +1941,12 @@
<p>Adds an arc with the given control points and radius to the
current subpath, connected to the previous point by a straight
line.</p>
+
+ <p>If two radii are provided, the first controls the width of the
+ 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
+ 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>
@@ -2199,12 +2207,15 @@
straight line.</p>
<p>Otherwise, let <var title="">The Arc</var> be the shortest arc
- given by circumference of the circle that has radius <var title="">radius</var> 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
+ 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 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 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 circle touches these two lines are called the start and
+ which this ellipse touches these two lines are called the start and
end tangent points respectively. The method must connect the point
(<var title="">x0</var>, <var title="">y0</var>) to the start
tangent point by a straight line, adding the start tangent point to
@@ -2215,40 +2226,66 @@
<hr>
<p>The <dfn id="dom-context-2d-arc" title="dom-context-2d-arc"><code>arc(<var title="">x</var>, <var title="">y</var>, <var title="">radius</var>,
- <var title="">startAngle</var>, <var title="">endAngle</var>, <var title="">anticlockwise</var>)</code></dfn> method draws an arc. If
- the object's path has any subpaths, then the method must add a
- straight line from the last point in the subpath to the start point
- of the arc. In any case, it must draw the arc between the start
- point of the arc and the end point of the arc, and add the start and
- end points of the arc to the subpath. The arc and its start and end
+ <var title="">startAngle</var>, <var title="">endAngle</var>, <var title="">anticlockwise</var>)</code></dfn> and <dfn id="dom-context-2d-ellipse" title="dom-context-2d-ellipse"><code>ellipse(<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>)</code></dfn> methods draw arcs.</p>
+
+ <p>The <code title="dom-context-2d-arc"><a href="#dom-context-2d-arc">arc()</a></code> method is
+ equivalent to the <code title="dom-context-2d-ellipse"><a href="#dom-context-2d-ellipse">ellipse()</a></code> method in the case
+ where the two radii are equal. When the <code title="dom-context-2d-arc"><a href="#dom-context-2d-arc">arc()</a></code> method is invoked, it must
+ act as if the <code title="dom-context-2d-ellipse"><a href="#dom-context-2d-ellipse">ellipse()</a></code>
+ method had been invoked with the <var title="">radiusX</var> and
+ <var title="">radiusY</var> arguments set to the value of the <var title="">radius</var> argument, the <var title="">rotation</var>
+ argument set to zero, and the other arguments set to the same values
+ as their identically named arguments on the <code title="dom-context-2d-arc"><a href="#dom-context-2d-arc">arc()</a></code> method.</p>
+
+ <p>When the <code title="dom-context-2d-ellipse"><a href="#dom-context-2d-ellipse">ellipse()</a></code>
+ method is invoked, it must proceed as follows. First, if the
+ object's path has any subpaths, then the method must add a straight
+ line from the last point in the subpath to the start point of the
+ arc. Then, it must add the start and end points of the arc to the
+ subpath, and connect them with an arc. The arc and its start and end
points are defined as follows:</p>
- <p>Consider a circle that has its origin at (<var title="">x</var>,
- <var title="">y</var>) and that has radius <var title="">radius</var>. The points at <var title="">startAngle</var>
- and <var title="">endAngle</var> along this circle's circumference,
- measured in radians clockwise from the positive x-axis, are the
- start and end points respectively.</p>
+ <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="">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>
- <p>If the <var title="">anticlockwise</var> argument is omitted or
- false and <span title=""><var title="">endAngle</var>-<var title="">startAngle</var></span> is equal to or greater than <span title="">2π</span>, or, if the <var title="">anticlockwise</var>
+ <p>If the <var title="">anticlockwise</var> argument false and <span title=""><var title="">endAngle</var>-<var title="">startAngle</var></span> is equal to or greater than <span title="">2π</span>, or, if the <var title="">anticlockwise</var>
argument is <em>true</em> and <span title=""><var title="">startAngle</var>-<var title="">endAngle</var></span> is
equal to or greater than <span title="">2π</span>, then the arc
- is the whole circumference of this circle.</p>
-
+ is the whole circumference of this ellipse.</p>
+
<p>Otherwise, the arc is the path along the circumference of this
- circle from the start point to the end point, going anti-clockwise
+ ellipse from the start point to the end point, going anti-clockwise
if the <var title="">anticlockwise</var> argument is true, and
- clockwise otherwise. Since the points are on the circle, as opposed
+ clockwise otherwise. Since the points are on the ellipse, as opposed
to being simply angles from zero, the arc can never cover an angle
- greater than <span title="">2π</span> radians. If the two points
- are the same, or if the radius is zero, then the arc is defined as
- being of zero length in both directions.</p>
+ greater than <span title="">2π</span> radians.</p>
- <p>Negative values for <var title="">radius</var> must cause the
- implementation to throw an <code>IndexSizeError</code>
- exception.</p>
+ <p>Negative values for <var title="">radiusX</var> or <var title="">radiusY</var> must cause the implementation to throw an
+ <code>IndexSizeError</code> exception.</p>
<hr>
+
+ <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>
+
+ <dd>
+
+ <p>Adds points to the subpath such that the arc described by the
+ circumference of the ellipse described by the arguments, starting
+ at the given start angle and ending at the given end angle, going
+ in the given direction (defaulting to clockwise), is added to the
+ path, connected to the previous point by a straight line.</p>
+
+ <p>Throws an <code>IndexSizeError</code> exception if the given
+ radius is negative.</p>
+
+ </dd>
<p>The <dfn id="dom-context-2d-rect" title="dom-context-2d-rect"><code>rect(<var title="">x</var>, <var title="">y</var>, <var title="">w</var>, <var title="">h</var>)</code></dfn> method must create a new subpath
containing just the four points (<var title="">x</var>, <var title="">y</var>), (<var title="">x</var>+<var title="">w</var>,
Received on Thursday, 18 October 2012 22:13:20 UTC