Cara memusatkan kanvas di html5

105

Saya sudah mencari solusi untuk sementara waktu sekarang, tetapi belum menemukan apa pun. Mungkin itu hanya istilah pencarian saya. Saya mencoba membuat pusat kanvas sesuai dengan ukuran jendela browser. Kanvasnya 800x600. Dan jika jendela menjadi di bawah 800x600, ukurannya juga harus diubah (tapi itu tidak terlalu penting saat ini)

html canvas css resize jorgen
sumber

Bagaimana cara menyuruhnya membuat kanvas satu halaman penuh tanpa memberikan dimensi dan tanpa scrollbar saat mengubah ukuran?

jorgen

2

Jangan lakukan dalam HTML .. lakukan dengan javascript, gunakan hal-hal seperti appendChild atau sesuatu dan setel lebar dan tinggi ke window.innerWidth dan window.innerHeight

JinX

173

Berikan kanvas properti gaya css berikut:

canvas {
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 800px;
}

Edit

Karena jawaban ini cukup populer, izinkan saya menambahkan sedikit lebih banyak detail.

Properti di atas akan secara horizontal memusatkan kanvas, div atau simpul lain apa pun yang Anda miliki relatif terhadap induknya. Tidak perlu mengubah margin dan bantalan atas atau bawah. Anda menentukan lebar dan membiarkan browser mengisi ruang yang tersisa dengan margin otomatis.

Namun, jika Anda ingin mengetik lebih sedikit, Anda dapat menggunakan properti singkatan css apa pun yang Anda inginkan, seperti

canvas {
    padding: 0;
    margin: auto;
    display: block;
    width: 800px;
}

Memusatkan kanvas secara vertikal membutuhkan pendekatan yang berbeda. Anda perlu menggunakan pemosisian absolut, dan menentukan lebar dan tinggi. Kemudian atur properti kiri, kanan, atas dan bawah ke 0 dan biarkan browser mengisi ruang yang tersisa dengan margin otomatis.

canvas {
    padding: 0;
    margin: auto;
    display: block;
    width: 800px;
    height: 600px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

Kanvas akan berada di tengah sendiri berdasarkan elemen induk pertama yang telah positiondisetel ke relativeatau absolute, atau isi jika tidak ada yang ditemukan.

Pendekatan lain akan digunakan display: flex, yang tersedia di IE11

Selain itu, pastikan Anda menggunakan doctype terbaru seperti xhtml atau html 5.

Marco Luglio
sumber

8

tampilan: blok; dan margin: 0 otomatis 0 otomatis; cukup juga. Terima kasih!

Chris

Untuk memusatkan kanvas secara vertikal, Anda tidak perlu memasukkan lebar dan tinggi, selama Anda menentukannya di HTML. Di chrome.

Zac

1

Lebar dan tinggi dapat ditentukan dalam css atau html. Tetapi css adalah cara yang disarankan karena semua logika presentasi harus ditempatkan di sana.

Marco Luglio

1

Ini tengah kanvas tetapi jika ada gambar yang digambar di kanvas, itu meregang. Dapatkah Anda memusatkan kanvas tanpa meregangkan gambar

aryan

Mengatur tinggi dan lebar dalam gaya sebaris pada elemen kanvas mengacaukan ukuran gambar yang saya gambar dan semacamnya. Hanya peringatan yang mudah-mudahan akan menyelamatkan seseorang dari frustrasi.

MrBoJangles

52

Anda dapat memberi kanvas Anda properti ff CSS:

#myCanvas
{
    display: block;
    margin: 0 auto;
}

jinmichaelr
sumber

Bisakah Anda memberikan jsfiddle? Pendekatan ini tampaknya tidak berhasil

jose.angel.jimenez

3

Ini berfungsi untuk pemusatan horizontal, tetapi tidak untuk pemusatan vertikal.

Matty J

20

Tengahkan saja div di HTML:

  #test {
     width: 100px;
     height:100px;
     margin: 0px auto;
     border: 1px solid red;
   }


<div id="test">
   <canvas width="100" height="100"></canvas>
</div>

Ubah saja tinggi dan lebar menjadi apa pun dan Anda mendapatkan div di tengah

http://jsfiddle.net/BVghc/2/

JoeCianflone
sumber

Saya beruntung, saya membutuhkan ini segera setelah Anda mempostingnya. :)

mcandre

5

Ini tidak berfungsi jika kanvas lebih kecil dari wadah.

SystemicPlural

8

Untuk memusatkan elemen kanvas secara horizontal, Anda harus menetapkannya sebagai level blok dan membiarkan properti margin kiri dan kanannya pada browser:

canvas{
    margin-right: auto;
    margin-left: auto;
    display: block;
}

Jika Anda ingin memusatkannya secara vertikal, elemen kanvas harus benar-benar diposisikan:

canvas{
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);              
}

Jika Anda ingin memusatkannya secara horizontal dan vertikal, lakukan:

canvas{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);               
}

Untuk info lebih lanjut kunjungi: https://www.w3.org/Style/Examples/007/center.en.html

Konkret
sumber

5

Jawaban di atas hanya berfungsi jika kanvas Anda memiliki lebar yang sama dengan wadah.

Ini berfungsi terlepas:

#container {
  width: 100px;
  height:100px;
  border: 1px solid red;
  
  
  margin: 0px auto;
  text-align: center;
}

#canvas {
  border: 1px solid blue;
  width: 50px;
  height: 100px;
  
}

<div id="container">
  <canvas id="canvas" width="100" height="100"></canvas>
</div>

Luaskan cuplikan

SystemicPlural
sumber

3

Gunakan kode ini:

<!DOCTYPE html>
<html>
<head>
<style>
.text-center{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}
</style>
</head>
<body>

<div class="text-center">
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</div>

</body>
</html>

Keyur Patel
sumber

2

Saya memiliki masalah yang sama, karena saya memiliki gambar dengan banyak lebar berbeda yang saya muat hanya dengan info ketinggian. Menyetel lebar memungkinkan browser meregangkan dan menekan gambar. Saya memecahkan masalah dengan membuat baris teks tepat sebelum baris image_tag di tengah (juga menyingkirkan float: left;). Saya ingin teksnya rata kiri, tetapi ini adalah ketidaknyamanan kecil, yang dapat saya toleransi.

MDM
sumber

0

Tambahkan text-align: center;ke tag induk dari <canvas>. Itu dia.

Contoh:

<div style="text-align: center">
    <canvas width="300" height="300">
        <!--your canvas code -->
    </canvas>
</div>

Raj Yadav
sumber

ini sederhana kemudian menggunakan css

Clifton Avil D'Souza

Cara memusatkan kanvas di html5

Jawaban: