Bagaimana untuk Menjadikan Elemen Kanvas HTML5 Sesuai dengan Keseluruhan Tetingkap?

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...
}

CSS:

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

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!

JavaScript html5 css html while function this padding canvas issue

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn