mirror of
https://github.com/SerenityOS/serenity
synced 2024-10-15 04:13:11 +00:00
Base: Add a test page for canvas patterns
This commit is contained in:
parent
f74e2da875
commit
bcc4e5ee0b
55
Base/res/html/misc/canvas-patterns.html
Normal file
55
Base/res/html/misc/canvas-patterns.html
Normal file
|
@ -0,0 +1,55 @@
|
||||||
|
<h1>Canvas Patterns</h1>
|
||||||
|
<em>Canvas pattern: Repeat (heart)</em><br><code>ctx.createPattern(img, "repeat")</code><br>
|
||||||
|
<canvas id="canvas-0" width="230" height="210"></canvas><br><br>
|
||||||
|
<em>Canvas pattern: Repeat</em><br><code>ctx.createPattern(img, "repeat")</code><br>
|
||||||
|
<canvas id="canvas-1" width="400" height="300"></canvas><br><br>
|
||||||
|
<em>Canvas pattern: Repeat</em><br><code>ctx.createPattern(img, "repeat-x")</code><br>
|
||||||
|
<canvas id="canvas-2" width="400" height="300"></canvas><br><br>
|
||||||
|
<em>Canvas pattern: Repeat</em><br><code>ctx.createPattern(img, "repeat-y")</code><br>
|
||||||
|
<canvas id="canvas-3" width="400" height="300"></canvas><br><br>
|
||||||
|
<em>Canvas pattern: Repeat</em><br><code>ctx.createPattern(img, "no-repeat")</code><br>
|
||||||
|
<canvas id="canvas-4" width="400" height="300"></canvas>
|
||||||
|
<style>
|
||||||
|
canvas {
|
||||||
|
border: 1px solid black;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
const img = new Image();
|
||||||
|
img.src = "car.png";
|
||||||
|
|
||||||
|
img.onload = () => {
|
||||||
|
const heartDemo = (canvasId) => {
|
||||||
|
const canvas = document.getElementById(canvasId);
|
||||||
|
const ctx = canvas.getContext("2d");
|
||||||
|
const pattern = ctx.createPattern(img, "repeat");
|
||||||
|
const scale = 1.5
|
||||||
|
const scaleValues = l =>l.map(value => value * scale);
|
||||||
|
ctx.fillStyle = pattern;
|
||||||
|
// Heart path taken from: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(...scaleValues([75, 40]));
|
||||||
|
ctx.bezierCurveTo(...scaleValues([75, 37, 70, 25, 50, 25]));
|
||||||
|
ctx.bezierCurveTo(...scaleValues([20, 25, 20, 62.5, 20, 62.5]));
|
||||||
|
ctx.bezierCurveTo(...scaleValues([20, 80, 40, 102, 75, 120]));
|
||||||
|
ctx.bezierCurveTo(...scaleValues([110, 102, 130, 80, 130, 62.5]));
|
||||||
|
ctx.bezierCurveTo(...scaleValues([130, 62.5, 130, 25, 100, 25]));
|
||||||
|
ctx.bezierCurveTo(...scaleValues([85, 25, 75, 37, 75, 40]));
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
|
||||||
|
const makePatternDemo = (canvasId, repeat) => {
|
||||||
|
const canvas = document.getElementById(canvasId);
|
||||||
|
const ctx = canvas.getContext("2d");
|
||||||
|
const pattern = ctx.createPattern(img, repeat);
|
||||||
|
ctx.fillStyle = pattern;
|
||||||
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||||
|
}
|
||||||
|
|
||||||
|
heartDemo("canvas-0")
|
||||||
|
makePatternDemo("canvas-1", "repeat");
|
||||||
|
makePatternDemo("canvas-2", "repeat-x");
|
||||||
|
makePatternDemo("canvas-3", "repeat-y");
|
||||||
|
makePatternDemo("canvas-4", "no-repeat");
|
||||||
|
};
|
||||||
|
</script>
|
|
@ -186,6 +186,7 @@
|
||||||
<li><h3>Canvas</h3></li>
|
<li><h3>Canvas</h3></li>
|
||||||
<li><a href="canvas.html">canvas 2D test</a></li>
|
<li><a href="canvas.html">canvas 2D test</a></li>
|
||||||
<li><a href="canvas-gradients.html">canvas gradients!</a></li>
|
<li><a href="canvas-gradients.html">canvas gradients!</a></li>
|
||||||
|
<li><a href="canvas-patterns.html">canvas patterns</a></li>
|
||||||
<li><a href="canvas-rotate.html">canvas rotate()</a></li>
|
<li><a href="canvas-rotate.html">canvas rotate()</a></li>
|
||||||
<li><a href="canvas-path-rect.html">canvas path rect test</a></li>
|
<li><a href="canvas-path-rect.html">canvas path rect test</a></li>
|
||||||
<li><a href="canvas-path-quadratic-curve.html">canvas path quadratic curve test</a></li>
|
<li><a href="canvas-path-quadratic-curve.html">canvas path quadratic curve test</a></li>
|
||||||
|
|
Loading…
Reference in a new issue