mirror of
https://github.com/SerenityOS/serenity
synced 2024-10-15 04:13:11 +00:00
Base: Add canvas clip path test page
This commit is contained in:
parent
20e9213cc4
commit
67aceb6c67
44
Base/res/html/misc/canvas-clip-path.html
Normal file
44
Base/res/html/misc/canvas-clip-path.html
Normal file
|
@ -0,0 +1,44 @@
|
|||
<style>
|
||||
canvas {
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
<!-- Examples taken from MDN -->
|
||||
<b>(nonzero) path clipping:</b><br>
|
||||
<canvas id="canvas1" width="200" height="160"></canvas>
|
||||
<br>
|
||||
<b>evenodd path clipping:</b><br>
|
||||
<canvas id="canvas2" width="200" height="160"></canvas>
|
||||
<script>
|
||||
{
|
||||
const canvas = document.getElementById("canvas1");
|
||||
const ctx = canvas.getContext("2d");
|
||||
|
||||
// Create circular clipping region
|
||||
ctx.beginPath();
|
||||
ctx.arc(0/*FIMXE: Should be 100, but ctx.arc() is currently broken*/, 75, 50, 0, Math.PI * 2);
|
||||
ctx.clip();
|
||||
|
||||
// Draw stuff that gets clipped
|
||||
ctx.fillStyle = "blue";
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.fillStyle = "orange";
|
||||
ctx.fillRect(0, 0, 100, 100);
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
{
|
||||
const canvas = document.getElementById("canvas2");
|
||||
const ctx = canvas.getContext("2d");
|
||||
|
||||
// Create clipping path
|
||||
let region = new Path2D();
|
||||
region.rect(80, 10, 20, 130);
|
||||
region.rect(40, 50, 100, 50);
|
||||
ctx.clip(region, "evenodd");
|
||||
|
||||
// Draw stuff that gets clipped
|
||||
ctx.fillStyle = "blue";
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
}
|
||||
</script>
|
|
@ -194,6 +194,7 @@
|
|||
<li><a href="canvas-path-quadratic-curve.html">canvas path quadratic curve 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-clip-path.html">canvas clip paths</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>
|
||||
|
|
Loading…
Reference in a new issue