Short URL: http://html5.org/r/7144
| SVN | Bug | Comment | Time (UTC) |
|---|---|---|---|
| 7144 | 2012-06-23 20:32 |
Index: source
===================================================================
--- source (revision 7143)
+++ source (revision 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