55 lines
1.2 KiB
Svelte
55 lines
1.2 KiB
Svelte
<script>
|
|
export let topText;
|
|
export let leftText;
|
|
export let rightText;
|
|
export let bottomText;
|
|
export let fontSize;
|
|
|
|
import { onMount } from "svelte";
|
|
let canvas;
|
|
|
|
let sw = 512;
|
|
let sh = 512;
|
|
const pad = 32;
|
|
|
|
function render(ctx) {
|
|
ctx.lineWidth = 2;
|
|
ctx.lineCap = 'round';
|
|
ctx.fillStyle = '#999';
|
|
ctx.strokeStyle = '#999';
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(pad, sh/2);
|
|
ctx.lineTo(sw - pad, sh/2);
|
|
ctx.moveTo(sw/2, pad);
|
|
ctx.lineTo(sw/2, sh - pad);
|
|
ctx.stroke();
|
|
|
|
ctx.font = fontSize + 'px Inter';
|
|
ctx.textAlign = 'center';
|
|
ctx.textBaseline = 'middle';
|
|
ctx.fillText(topText, sw/2, pad/2);
|
|
ctx.fillText(bottomText, sw/2, sh - pad/2);
|
|
|
|
ctx.textBaseline = 'bottom';
|
|
ctx.textAlign = 'left';
|
|
ctx.fillText(leftText, pad/2, sh/2 - pad/4);
|
|
ctx.textAlign = 'right';
|
|
ctx.fillText(rightText, sw - pad/2, sh/2 - pad/4);
|
|
}
|
|
|
|
onMount(() => {
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
canvas.style.width = '100%';
|
|
canvas.style.height = '100%';
|
|
canvas.width = canvas.offsetWidth;
|
|
canvas.height = canvas.offsetWidth;
|
|
sw = canvas.width;
|
|
sh = canvas.height;
|
|
|
|
render(ctx);
|
|
});
|
|
</script>
|
|
|
|
<canvas bind:this={canvas} id="canvas" width="512" height="512"></canvas> |