Trong bài tập trước, chúng ta đã học cách sử dụng hàm vòng đời onMount để vẽ lên một canvas.
Nhưng ví dụ đó có lỗi — nó đang sử dụng document.querySelector('canvas'). Đầu ra của hàm này luôn trả về <canvas> đầu tiên được tìm thấy trên trang mà chưa chắc là cái nằm trong component của chúng ta.
Thay vào đó, chúng ta có thể sử dụng phép bind chỉ đọc this để có một tham chiếu đến phần tử:
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>Lưu ý: giá trị của canvas sẽ là undefined cho đến khi component được thiết lập.
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}></canvas>
<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>