Bolehkah Anda Membuat Saiz Kanvas HTML5 Dengan Lancar dengan Tetingkap Penyemak Imbas?-tutorial js-php.cn

Bolehkah Anda Membuat Saiz Kanvas HTML5 Dengan Lancar dengan Tetingkap Penyemak Imbas?

Mary-Kate Olsen

Lepaskan： 2024-11-03 03:42:03

asal

306 orang telah melayarinya

Can You Make an HTML5 Canvas Resize Seamlessly with the Browser Window?

Memasang Kanvas HTML5 Dengan Sempurna dalam Tetingkap Penyemak Imbas

Apabila mengubah saiz halaman, elemen seperti

boleh diskalakan dengan lancar dengan menetapkan sifat ketinggian dan lebarnya kepada 100%. Walau bagaimanapun, adakah perkara yang sama berlaku pada elemen?

Penyelesaian: Penskalaan Automatik dengan CSS dan JavaScript

Kuncinya terletak pada gabungan CSS dan JavaScript:

JavaScript:

Dalam fungsi lukisan anda, laraskan lebar dan tinggi untuk dipadankan dengan dimensi tetingkap semasa:

<code class="javascript">function draw() {
  var ctx = (your canvas context);
  ctx.canvas.width = window.innerWidth;
  ctx.canvas.height = window.innerHeight;
  // Drawing code here...
}</code>

Salin selepas log masuk

CSS:

Tentukan CSS untuk dan bekasnya:

<code class="css">html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}</code>

Salin selepas log masuk

Dengan menetapkan HTML dan elemen badan kepada lebar dan tinggi penuh, dikekang untuk dimuatkan dalam tingkap. Skrip melaraskan saiznya secara dinamik untuk memastikan kesesuaian yang sempurna pada setiap masa.

Penyelesaian ini telah terbukti mempunyai kesan prestasi yang minimum, menjadikannya cara yang cekap untuk mencipta kanvas yang boleh diubah saiz.

Atas ialah kandungan terperinci Bolehkah Anda Membuat Saiz Kanvas HTML5 Dengan Lancar dengan Tetingkap Penyemak Imbas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!