Skip to main content

以前の演習で、canvas にお絵描きをするために onMount ライフサイクル関数の使い方を学びました。

しかし、あの例は少しバギー(buggy)です — document.querySelector('canvas') を使用しており、ページで一番最初に見つかった <canvas> を常に返します。それは私たちのコンポーネントにあるものではない別の canvas かもしれません。

代わりに、読み取り専用の this バインディングを使用して、要素の参照を取得できます:

App.svelte
let canvas;

onMount(() => {
	const canvas = document.querySelector('canvas')
	const context = canvas.getContext('2d');

	let frame = requestAnimationFrame(function loop(t) {
		frame = requestAnimationFrame(loop);
		paint(context, t);
	});

	return () => {
		cancelAnimationFrame(frame);
	};
});
App.svelte
<canvas
	bind:this={canvas}
	width={32}
	height={32}
></canvas>

canvas の値はコンポーネントがマウントされるまで undefined です、ご注意ください。

Next: Component bindings

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<script>
	import { onMount } from 'svelte';
	import { paint } from './gradient.js';
 
	onMount(() => {
		const canvas = document.querySelector('canvas')
		const context = canvas.getContext('2d');
 
		let frame = requestAnimationFrame(function loop(t) {
			frame = requestAnimationFrame(loop);
			paint(context, t);
		});
 
		return () => {
			cancelAnimationFrame(frame);
		};
	});
</script>
 
<canvas
	width={32}
	height={32}
/>
 
<style>
	canvas {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: #666;
		mask: url(./svelte-logo-mask.svg) 50% 50% no-repeat;
		mask-size: 60vmin;
		-webkit-mask: url(./svelte-logo-mask.svg) 50% 50% no-repeat;
		-webkit-mask-size: 60vmin;
	}
</style>
initialising