你可以使用特殊的 bind:this 指令获取对组件中元素的只读绑定。

¥You can use the special bind:this directive to get a readonly binding to an element in your component.

本练习中的 $effect 尝试创建画布上下文，但 canvas 是 undefined。首先在组件的顶层声明它...

¥The $effect in this exercise attempts to create a canvas context, but canvas is undefined. Begin by declaring it at the top level of the component...

<script>
	import { paint } from './gradient.js';

	let canvas;

	$effect(() => {
		// ...
	});
</script>

<script lang="ts">
	import { paint } from './gradient.js';

	let canvas;

	$effect(() => {
		// ...
	});
</script>

...然后将指令添加到 <canvas> 元素：

¥...then add the directive to the <canvas> element:

<canvas bind:this={canvas} width={32} height={32}></canvas>

请注意，canvas 的值将保持为 undefined，直到组件安装完毕 - 换句话说，在 $effect 运行之前你无法访问它。

¥Note that the value of canvas will remain undefined until the component has mounted — in other words you can’t access it until the $effect runs.