Czasami możemy chcieć zmienić rozmiar płótna HTML5, aby pasował do okna, w którym się znajduje.

W tym artykule przyjrzymy się, jak zmienić rozmiar płótna HTML5, aby pasował do okna.

Ustawianie właściwości szerokości i wysokości płótna

Możemy po prostu ustawić właściwości widthi heightpłótna, gdy okno zmienia rozmiar, aby ustawić szerokość i wysokość płótna, aby zmienić jego rozmiar.

Na przykład możemy napisać:

const draw = (canvas) => {
  const ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.arc(95, 50, 40, 0, 2 * Math.PI);
  ctx.stroke();
}
const canvas = document.querySelector("canvas");
canvas.width = window.innerWidth
canvas.height = window.innerHeight
draw(canvas)
window.addEventListener('resize', () => {
  canvas.width = window.innerWidth
  canvas.height = window.innerHeight
  draw(canvas)
})

canvas.width = window.innerWidth
canvas.height = window.innerHeight

Gdy płótno zmienia rozmiar, zawartość znika, więc trzeba je narysować ponownie za każdym razem, gdy zmieniamy rozmiar płótna, ustawiając właściwości widthi height.

Ustaw rozmiar za pomocą CSS

Możemy również ustawić rozmiar płótna za pomocą CSS, aby wypełniło ekran.

Na przykład możemy napisać następujący kod HTML:

<canvas></canvas>

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}
canvas {
  background-color: #ccc;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

Ustawiamy również positionna absolutei top, left, righti bottomna 0, aby kanwa wypełniła ekran.

Ponadto sprawiamy, że htmlelementy i body wypełniają ekran ustawiając widthi heightna 100%.

I możemy na nim narysować:

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

Mamy współrzędne xiy środka, promień oraz kąty początkowe i końcowe w radianach jako argumenty w tej kolejności.

Wniosek

Możemy zmienić rozmiar płótna, aby dopasować go do ekranu za pomocą JavaScript lub CSS.

Więcej treści na plainenglish.io