Lines Matching +full:fill +full:- +full:range
8 font-family: Helvetica, Arial, sans-serif;
9 font-size: 100%;
17 display: inline-block;
18 border-radius: 3px;
20 font-size: 0.9rem;
23 border-bottom: 1px solid #498b50;
25 -webkit-font-smoothing: antialiased;
26 font-weight: bold;
28 text-align: center;
38 box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.1) inset;
49 <stop offset="0%" style="stop-color:rgb(0,0,255); stop-opacity:0.3" />
50 <stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:0" />
53 <stop offset="0%" style="stop-color:rgb(0,255,0); stop-opacity:0.3" />
54 <stop offset="100%" style="stop-color:rgb(0,255,0); stop-opacity:0" />
57 <stop offset="0%" style="stop-color:rgb(255,0,0); stop-opacity:0.3" />
58 <stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:0" />
61 <stop offset="0%" style="stop-color:rgb(192,63,192); stop-opacity:0.3" />
62 <stop offset="100%" style="stop-color:rgb(192,63,192); stop-opacity:0" />
65 <stop offset="0%" style="stop-color:rgb(127,127,0); stop-opacity:0.3" />
66 <stop offset="100%" style="stop-color:rgb(127,127,0); stop-opacity:0" />
69 <stop offset="0%" style="stop-color:rgb(127,0,127); stop-opacity:0.3" />
70 <stop offset="100%" style="stop-color:rgb(127,0,127); stop-opacity:0" />
73 <stop offset="0%" style="stop-color:rgb(0,127,127); stop-opacity:0.3" />
74 <stop offset="100%" style="stop-color:rgb(0,127,127); stop-opacity:0" />
77 <stop offset="0%" style="stop-color:rgb(63,192,63); stop-opacity:0.3" />
78 <stop offset="100%" style="stop-color:rgb(63,192,63); stop-opacity:0" />
82 <path id="circleFill" d="M300,200 A 100,100 0,0,0 300,200" fill="#777" fill-opacity="0" />
83 <path id="circle" d="M300,200 A 100,100 0,0,0 300,200" fill="none" stroke="black" />
86 <text id="spanWedgeDesc" fill-opacity="0" >
89 <path id="span1" d="M200,200 Q300,300 200,300" fill="none" stroke="black" stroke-opacity="0"/>
90 <path id="span2" d="M200,200 C100,300 100,400 200,300" fill="none" stroke="black" stroke-opacity="0…
91 <path id="span3" d="M200,200 C300,100 100,400 300,200" fill="none" stroke="black" stroke-opacity="0…
92 <path id="wedge1" d="M200,200 L500,500 A 424.26,424.26 0,0,1 200,624.26 z" fill="url(#grad1)" fill-…
93 …id="wedge2" d="M200,200 L200,624.26 A 424.26,424.26 0,0,1 -100,500 z" fill="url(#grad2)" fill-opac…
94 <path id="wedge3" d="M200,200 L500,-100 A 424.26,424.26 0,0,1 240,622.5 z" fill="url(#grad3)" fill-…
97 <text id="trivialWedgeDesc1" fill-opacity="0" >
100 <text id="trivialWedgeDesc2" y="240" fill-opacity="0" >
103 <path id="span4" d="M200,200 Q300,300 400,300" fill="none" stroke="black" stroke-opacity="0"/>
104 <path id="span5" d="M200,200 Q280,320 200,400" fill="none" stroke="black" stroke-opacity="0"/>
105 <path id="span6" d="M200,200 Q60,340 100,400" fill="none" stroke="black" stroke-opacity="0"/>
106 …e4" d="M200,200 L500,500 A 424.26,424.26 0,0,1 579.47,389.74 z" fill="url(#grad1)" fill-opacity="0…
107 …e5" d="M200,200 L389.74,579.47 A 424.26,424.26 0,0,1 200,500 z" fill="url(#grad2)" fill-opacity="0…
108 …="wedge6" d="M200,200 L10.26,579.47 A 424.26,424.26 0,0,1 -100,500 z" fill="url(#grad3)" fill-opac…
112 <text id="sectorDesc1" fill-opacity="0" >
115 <text id="sectorDesc2" y="240" fill-opacity="0" >
116 containing a range of points.
118 <g id="xaxis" stroke-opacity="0" fill-opacity="0">
119 <path d="M100,200 L300,200" fill="none" stroke="rgb(191,191,191)"/>
120 <text x="100" y="220" fill="rgb(191,191,191)">-X</text>
121 <text x="300" y="220" text-anchor="end" fill="rgb(191,191,191)">+X</text>
123 <g id="yaxis" stroke-opacity="0" fill-opacity="0">
124 <path d="M200,100 L200,300" fill="none" stroke="rgb(191,191,191)"/>
125 <text x="205" y="100" alignment-baseline="hanging" fill="rgb(191,191,191)">-Y</text>
126 <text x="205" y="300" fill="rgb(191,191,191)">+Y</text>
128 <text id="sectorDescXYA" x="500" y="310" fill="rgb(0,0,255)" fill-opacity="0">
130 <text id="sectorDescXYB" x="500" y="360" fill="rgb(0,127,0)" fill-opacity="0">
131 X < 0 Y > 0 -Y < X</text>
132 <text id="sectorDescXYC" x="500" y="410" fill="rgb(255,0,0)" fill-opacity="0">
134 …geXY8" d="M200,200 L500,500 A 424.26,424.26 0,0,1 624.26,200 z" fill="url(#grad1)" fill-opacity="0…
135 <path id="wedgeXY6" d="M200,200 L-100,500 A 424.26,424.26 0,0,1 200,624.26 z" fill="url(#grad2)" fi…
136 <path id="wedgeXY3" d="M200,200 L-100,-100 A 424.26,424.26 0,0,1 200,-175.74 z" fill="url(#grad3)" …
139 <text id="lineSingleDesc" fill-opacity="0" >
142 <text id="sectorDescXY1" x="500" y="460" fill="rgb(192,63,192)" fill-opacity="0">
143 X > 0 Y < 0 -Y < X</text>
144 <text id="sectorDescXY2" x="500" y="460" fill="rgb(127,127,0)" fill-opacity="0">
145 X > 0 Y < 0 -Y > X</text>
146 <text id="sectorDescXY3" x="500" y="460" fill="rgb(255,0,0)" fill-opacity="0">
148 <text id="sectorDescXY4" x="500" y="460" fill="rgb(127,0,127)" fill-opacity="0">
150 <text id="sectorDescXY5" x="500" y="460" fill="rgb(0,127,127)" fill-opacity="0">
151 X < 0 Y > 0 -Y < X</text>
152 <text id="sectorDescXY6" x="500" y="460" fill="rgb(0,127,0)" fill-opacity="0">
153 X < 0 Y > 0 -Y < X</text>
154 <text id="sectorDescXY7" x="500" y="460" fill="rgb(63,192,63)" fill-opacity="0">
156 <text id="sectorDescXY8" x="500" y="460" fill="rgb(0,0,255)" fill-opacity="0">
158 <path id="wedgeXY1" d="M200,200 L500,-100 A 424.26,424.26 0,0,1 624.26,200 z" fill="url(#grad4)" fi…
159 <path id="wedgeXY2" d="M200,200 L200,-175.74 A 424.26,424.26 0,0,1 500,-100 z" fill="url(#grad5)" f…
160 <path id="wedgeXY4" d="M200,200 L-175.74,200 A 424.26,424.26 0,0,1 -100,-100 z" fill="url(#grad6)" …
161 <path id="wedgeXY5" d="M200,200 L-100,500 A 424.26,424.26 0,0,1 -175.74,200 z" fill="url(#grad7)" f…
162 …geXY7" d="M200,200 L200,624.26 A 424.26,424.26 0,0,1 500,500 z" fill="url(#grad8)" fill-opacity="0…
163 <path id="lineSegment" d="M200,200 L200,624.26" fill="none" stroke="black" stroke-opacity="0"/>
166 <text id="curveMultipleDesc1" fill-opacity="0" >
169 <text id="curveMultipleDesc2" y="240" fill-opacity="0" >
172 <path id="curveSegment" d="M200,200 C250,200 300,150 300,100" fill="none" stroke="black" stroke-opa…
173 <path id="curveSegment1" d="M200,200 C250,200 300,150 300,100" fill="none"/>
174 <path id="curveSegment2" d="M200,200 C250,200 300,150 200,100" fill="none"/>
175 <path id="curveSegment3" d="M200,200 C350,200 250,-150 170,300" fill="none"/>
178 <text id="line1DDest1" fill-opacity="0" >
179 Some lines occupy one-dimensional
181 <text id="line1DDest2" y="240" fill-opacity="0" >
184 <text id="sectorDescXY9" x="500" y="460" fill="rgb(192,92,31)" fill-opacity="0">
186 <text id="sectorDescXY10" x="500" y="460" fill="rgb(31,92,192)" fill-opacity="0">
188 <text id="sectorDescXY11" x="500" y="460" fill="rgb(127,63,127)" fill-opacity="0">
190 …path id="horzSegment" d="M200,200 L341.4,200" fill="none" stroke="rgb(192,92,31)" stroke-width="2"…
191 …path id="vertSegment" d="M200,200 L200,341.4" fill="none" stroke="rgb(31,92,192)" stroke-width="2"…
192 …path id="diagSegment" d="M200,200 L100,100" fill="none" stroke="rgb(127,63,127)" stroke-width="2…
195 <text id="curve1dDesc1" fill-opacity="0" >
198 <text id="curve1dDesc2" y="240" fill-opacity="0" >
199 one-dimensional sectors, then diverge.
201 <path id="cubicSegment" fill="none" stroke="black" />
202 <path id="cubicSegment1" d="M200,200 C200,200 200,200 200,200" fill="none" />
203 <path id="cubicSegment2" d="M200,200 C250,200 300,200 300,100" fill="none"/>
205 <text id="sectorNumberDesc" fill-opacity="0" >
208 <text id="spanSectorDesc" fill-opacity="0" >
211 <text id="bitOverDesc" fill-opacity="0" >
291 var numRegEx = /-?\d+\.?\d*(?:e-?\d+)?/g;
314 var numRegEx = /-?\d+\.?\d*(?:e-?\d+)?/g;
339 if (('0' <= ch && ch <= '9') || ch == '-' || ch == '+') {
365 var midVec = { x: mid.x - c.x, y: mid.y - c.y };
368 var scale = Math.sqrt(midLenSqr) / Math.sqrt(radius * radius - midLenSqr);
370 y: mid.y - midVec.x * scale };
413 points[0].x -= lastc.x - c.x;
414 points[0].y -= lastc.y - c.y;
435 points[0].x = c.x * 2 - lastc.x;
436 points[0].y = c.y * 2 - lastc.y;
473 wedge2: "M200,200 L200,624.26 A 424.26,424.26 0,0,1 -100,500 z",
474 wedge3: "M200,200 L500,-100 A 424.26,424.26 0,0,1 240,622.5 z",
481 wedge6: "M200,200 L10.26,579.47 A 424.26,424.26 0,0,1 -100,500 z",
486 wedgeXY6: "M200,200 L-100,500 A 424.26,424.26 0,0,1 200,624.26 z",
487 wedgeXY3: "M200,200 L-100,-100 A 424.26,424.26 0,0,1 200,-175.74 z",
489 wedgeXY1: "M200,200 L500,-100 A 424.26,424.26 0,0,1 624.26,200 z",
490 wedgeXY2: "M200,200 L200,-175.74 A 424.26,424.26 0,0,1 500,-100 z",
491 wedgeXY4: "M200,200 L-175.74,200 A 424.26,424.26 0,0,1 -100,-100 z",
492 wedgeXY5: "M200,200 L-100,500 A 424.26,424.26 0,0,1 -175.74,200 z",
499 curveSegment3: "M200,200 C350,200 250,-150 170,300",
567 record.draw = 'ctx.fill();\n';
612 xaxis.funcBody += canvas_text_xy( { fillText:"-X", x:100, y:220 } );
619 yaxis.funcBody += canvas_text_xy( { fillText:"-Y", x:205, y:100 } );
628 add_canvas_text(data, "sectorDesc2", { fillText:"containing a range of points.", y:240 } );
633 { fillText:"X < 0 Y > 0 -Y < X", x:500, y:360, fillStyle:'"rgb(0,127,0)"'} );
648 { fillText:"X > 0 Y < 0 -Y < X", x:500, y:460, fillStyle:'"rgb(192,63,192)"'} );
650 { fillText:"X > 0 Y < 0 -Y > X", x:500, y:460, fillStyle:'"rgb(127,127,0)"'} );
656 { fillText:"X < 0 Y > 0 -Y < X", x:500, y:460, fillStyle:'"rgb(0,127,127)"'} );
658 { fillText:"X < 0 Y > 0 -Y < X", x:500, y:460, fillStyle:'"rgb(0,127,0)"'} );
684 { fillText:"X > 0 Y < 0 -Y < X", x:500, y:460, fillStyle:'"rgb(192,63,192)"'} );
686 { fillText:"X > 0 Y < 0 -Y > X", x:500, y:460, fillStyle:'"rgb(127,127,0)"'} );
692 { fillText:"X < 0 Y > 0 -Y < X", x:500, y:460, fillStyle:'"rgb(0,127,127)"'} );
694 { fillText:"X < 0 Y > 0 -Y < X", x:500, y:460, fillStyle:'"rgb(0,127,0)"'} );
709 { fillText:"Some lines occupy one-dimensional" } );
733 { fillText:"one-dimensional sectors, then diverge.", y:240 } );
736 { fillText:"X > 0 Y < 0 -Y < X", x:500, y:460, fillStyle:'"rgb(192,63,192)"'} );
756 return A + (B - A) * t;
782 var mx = ex * 27 - ax * 8 - dx;
783 var my = ey * 27 - ay * 8 - dy;
784 var nx = fx * 27 - ax - dx * 8;
785 var ny = fy * 27 - ay - dy * 8;
786 var bx = (mx * 2 - nx) / 18;
787 var by = (my * 2 - ny) / 18;
788 var cx = (nx * 2 - mx) / 18;
789 var cy = (ny * 2 - my) / 18;
825 function AnimationAddCommon(timing, range, attr, inParams) {
828 range: range,
831 duration: timing[1] - timing[0],
832 remaining: timing[1] - timing[0],
839 function AnimationAddSVG(timing, element, range, attr, inParams) {
840 var animation = AnimationAddCommon(timing, range, attr, inParams);
845 function AnimationAddCanvas(timing, element, range, attr, inParams) {
846 var animation = AnimationAddCommon(timing, range, attr, inParams);
853 function AnimationAdd(timing, e, range, attr, funct, inParams) {
854 if (!range) {
855 range = [0, 1];
901 funcBody += '"' + verbArray[verbArray.length - 1] + '"';
904 var animation = AnimationAddSVG(timing, element, range, "d", inParams);
908 if (animation.element.getAttribute("stroke-opacity")) {
909 … animation = AnimationAddSVG(timing, element, range, "stroke-opacity", inParams);
911 if (animation.element.getAttribute("fill-opacity")) {
912 … animation = AnimationAddSVG(timing, element, range, "fill-opacity", inParams);
927 funcBody += verbArray[verbArray.length - 1];
929 animation = AnimationAddCanvas(timing, element, range, attr, inParams);
934 animation = AnimationAddCanvas(timing, element, range, attr, inParams);
947 var numRegEx = /-?\d+\.?\d*(?:e-?\d+)?/g;
994 setValue += pathVerbs[pathVerbs.length - 1];
1020 if (!changeAlpha || animation.range[1] > 0) {
1023 ctx.globalAlpha = animation.range[1];
1026 animation.func(ctx, animation.range[animation.range.length - 1], animation.inParams);
1059 so, first --
1062 next --
1068 ----------------
1079 animation.element.setAttribute(animation.attribute, animation.range[1]);
1080 if (animation.range[1] > 0) {
1087 var attrStr = animation.func(animation.range[1], animation.inParams);
1096 var endValue = animation.range[animation.range.length - 1];
1097 var interp = animation.range[0] + (endValue - animation.range[0]) * (1 - value);
1118 var interp = animation.range[0] + (animation.range[1] - animation.range[0]) * (1 - value);
1140 animationState.start = now - animationState.time;
1142 animationState.time = now - animationState.start;
1146 var interval = animationState.time - animation.timing[0];
1175 var interval = animationState.time - animation.timing[0];
1176 animation.remaining = animation.duration > interval ? animation.duration - interval : 0;
1216 var time = now - animationState.start;
1220 var remaining = animation.remaining - time;
1250 … var tmp = animation.range[0]; animation.range[0] = animation.range[1]; animation[1] = tmp;
1251 animation.remaining = animation.duration - animation.remaining;
1290 animationState.start = performance.now() - animationState.time;
1301 text.setAttribute("font-family", "Helvetica,Arial");
1302 text.setAttribute("font-size", "1.3rem");
1434 AnimationAdd([1000, 3000], lineSegment, [-22.5 * Math.PI / 180], "path", evaluate_at,
1441 AnimationAdd([3000, 7000], lineSegment, [-22.5 * Math.PI / 180, (-22.5 - 360) * Math.PI / 180],
1495 SetupText("sectorDescXY" + i, 500, 260 + (i - 8) * 25);
1533 y: center.y - (radius * Math.sin(radians))
1539 start: 180 / Math.PI * Math.atan2(pt1.y - center.y, pt1.x - center.x),
1540 end: 180 / Math.PI * Math.atan2(pt2.y - center.y, pt2.x - center.x)
1547 var arcSweep = endAngle - startAngle <= 180 ? "0" : "1";
1569 if (now - path.start < dur) {
1578 circleFill.setAttribute("fill-opacity", "0.3");
1583 var pathStr = ArcStart(circle.center, circle.radius, 0, (now - circle.start) / (dur / 359.9));
1588 var delay = dur - (now - circle.start);
1610 text.setAttribute("text-anchor", "middle");
1611 text.setAttribute("alignment-baseline", "mathematical");
1630 var keyframeIndex = 3; // keyframeArray.length - 1; // normally 0 ; set to debug a particular frame
1634 if (keyframeIndex < keyframeArray.length - 1) {