We use cookies to ensure you get the best experience on our website
Etusivu Tutki Apua
Rekisteröidy Kirjaudu sisään
0ct0pu5
/
ladybird
1
0
Fork 0
Tiedostot Ongelmat 0 Pull-pyynnöt 0 Wiki
Selaa lähdekoodia

Base: Add a test page for Path2D

Neither of the tests here actually passes properly right now. It's a
little more aspirational...

In the first one, the circle draws in the wrong place due apparently to
existing bugs in `CanvasRenderingContext2D::ellipse()`.

In the second, I just haven't yet implemented creating a Path2D from an
SVG path string, because that's going to take a fair bit of untangling
first.
Sam Atkins 2 vuotta sitten
vanhempi
6644f3ab44
commit
9075dea3a8
2 muutettua tiedostoa jossa 41 lisäystä ja 0 poistoa
Yhdistetty näkymä Näytä diff tilastot
  1. 40 0
      Base/res/html/misc/canvas-path2d.html
  2. 1 0
      Base/res/html/misc/welcome.html

+ 40 - 0
Base/res/html/misc/canvas-path2d.html
Näytä tiedosto 

@@ -0,0 +1,40 @@
 
+<!doctype html>
 
+<html>
 
+<head>
 
+    <meta charset="UTF-8" />
 
+    <title>Path2D test</title>
 
+</head>
 
+<body>
 
+    <h1>Path2D test</h1>
 
+    <p>These examples are taken from <a href="https://developer.mozilla.org/en-US/docs/Web/API/Path2D/Path2D">MDN</a>.</p>
 
+
 
+    <h2>Basic example</h2>
 
+    <p>Should be a square and a circle, both as outlines.</p>
 
+    <canvas id="canvas"></canvas>
 
+
 
+    <h2>SVG Path example</h2>
 
+    <p>Should display a filled black square.</p>
 
+    <canvas id="canvas-2"></canvas>
 
+
 
+    <script>
 
+        // Basic example
 
+        const canvas = document.getElementById('canvas');
 
+        const ctx = canvas.getContext('2d');
 
+
 
+        let path1 = new Path2D();
 
+        path1.rect(10, 10, 100,100);
 
+
 
+        let path2 = new Path2D(path1);
 
+        path2.moveTo(220, 60);
 
+        path2.arc(170, 60, 50, 0, 2 * Math.PI);
 
+
 
+        ctx.stroke(path2);
 
+
 
+        // SVG Path example
 
+        const canvas2 = document.getElementById('canvas-2');
 
+        const ctx2 = canvas2.getContext('2d');
 
+        let p = new Path2D('M10 10 h 80 v 80 h -80 Z');
 
+        ctx2.fill(p);
 
+    </script>
 
+</body>
 
+</html>

+ 1 - 0
Base/res/html/misc/welcome.html
Näytä tiedosto 

@@ -178,6 +178,7 @@
 
             <li><a href="img-canvas.html">canvas drawImage() test</a></li>
 
             <li><a href="img-canvas.html">canvas drawImage() test</a></li>
 
             <li><a href="canvas-path.html">canvas path house!</a></li>
 
             <li><a href="canvas-path.html">canvas path house!</a></li>
 
             <li><a href="trigonometry.html">canvas + trigonometry functions</a></li>
 
             <li><a href="trigonometry.html">canvas + trigonometry functions</a></li>
 
+            <li><a href="canvas-path2d.html">Path2D</a></li>
 
             <li><a href="webgl-clear-color-and-multiple-contexts.html">WebGL Demo - Multiple Contexts and glClear(Color)</a></li>
 
             <li><a href="webgl-clear-color-and-multiple-contexts.html">WebGL Demo - Multiple Contexts and glClear(Color)</a></li>
 
             <li><h3>Wasm</h3></li>
 
             <li><h3>Wasm</h3></li>
 
             <li><a href="mandelbrot-wasm.html">WebAssembly Mandelbrot Rendering Demo</a></li>
 
             <li><a href="mandelbrot-wasm.html">WebAssembly Mandelbrot Rendering Demo</a></li>

Contact | Legal | Takedown | Status
Self-hosted public services - About
NibbleSpot by 0ct0pu5