Bagaimana untuk Menjadikan Elemen Kanvas HTML5 Sesuai dengan Keseluruhan Tetingkap?-tutorial js-php.cn

Bagaimana untuk Menjadikan Elemen Kanvas HTML5 Sesuai dengan Keseluruhan Tetingkap?

Mary-Kate Olsen

Lepaskan： 2024-11-04 02:50:30

asal

260 orang telah melayarinya

How to Make an HTML5 Canvas Element Fit the Entire Window?

Mengubah Saiz Kanvas agar Sesuai Tetingkap

Masalah:

Walaupun anda boleh skala

elemen agar sesuai dengan ruang yang tersedia dengan menetapkan ketinggian dan lebarnya kepada 100%, menskalakan HTML5 elemen kelihatan seperti teka-teki.

Penyelesaian:

Untuk menyelesaikan isu ini secara elegan dan memastikan elemen kanvas mematuhi dimensi tetingkap, pertimbangkan pendekatan berikut:

JavaScript:

/* Essential for aligning elements relative to the canvas' current proportions. */
function draw() {
  var ctx = (a canvas context);
  ctx.canvas.width  = window.innerWidth;
  ctx.canvas.height = window.innerHeight;
  //...drawing code...
}

Salin selepas log masuk

CSS:

html, body {
  width:  100%;
  height: 100%;
  margin: 0;
}

Salin selepas log masuk

Butiran Pelaksanaan:

Fungsi JavaScript secara dinamik menetapkan sifat lebar dan ketinggian elemen kanvas agar sepadan dengan dimensi tetingkap.
Peraturan CSS mengalih keluar sebarang jidar atau pelapik di sekeliling dan elemen, membolehkan kanvas berkembang sepenuhnya.

Penyelesaian ini telah terbukti berprestasi dan memuaskan secara visual, membolehkan elemen kanvas anda menyesuaikan diri dengan lancar dengan persekitaran sekelilingnya.

Atas ialah kandungan terperinci Bagaimana untuk Menjadikan Elemen Kanvas HTML5 Sesuai dengan Keseluruhan Tetingkap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!