sveltejs 中的響應式全寬 canvas

Question

我對苗條很陌生，我正在嘗試讓 canvas 使用苗條在全屏上呈現。 聽起來很容易做到，但我無法讓它正常工作。 我將width和height變量綁定到父級的clientWidth / clientHeight並使用這些變量來設置 canvas 的尺寸。 現在的問題是，當onMount時，設置了width和height變量，但它們尚未應用於 canvas 元素。 這意味着當 canvas 第一次渲染時，它仍然具有初始尺寸，而不是父級的尺寸。 只有當我第二次渲染它時，它才具有適當的尺寸。 如何使 canvas 在第一次渲染時具有正確的尺寸，或者在 canvas 具有正確的尺寸時再次渲染它？

在這里你可以找到一個“工作”版本。

<script>
  import { onMount } from "svelte";

  let canvas;
  let ctx;
  let width = 1007;
  let height = 1140;

    const draw = () => {
    ctx.clearRect(0, 0, width, height);
    ctx.beginPath();
    ctx.moveTo(width/2 - 50, height/2);
    ctx.arc(width/2, height/2, 50, 0, 2 * Math.PI);
    ctx.fill();
    }
    
  onMount(() => {
    ctx = canvas.getContext("2d");
        draw();
        setTimeout(draw, 5000);
  });
</script>

<style>
  .container {
    width: 100%;
    height: 100%;
  }
</style>

<div
  class="container"
  bind:clientWidth={width}
  bind:clientHeight={height}>
  <canvas bind:this={canvas} {width} {height} />
</div>

Answer 1

您可以通過等待下一個“滴答”來解決這個問題

import { onMount, tick } from 'svelte';

onMount(async () => {
  ctx = canvas.getContext("2d");
  canvas.width = width;
  canvas.height = height;
  await tick()
  draw();
});

await tick()所做的是有效地暫停執行，直到所有當前更改都應用於 dom

在文檔中打勾