Cách căn giữa canvas trong html5

105

Tôi đã tìm kiếm giải pháp trong một thời gian, nhưng không tìm thấy bất cứ điều gì. Có lẽ đó chỉ là cụm từ tìm kiếm của tôi. Tôi đang cố tạo tâm canvas theo kích thước của cửa sổ trình duyệt. Canvas có kích thước 800x600. Và nếu cửa sổ dưới 800x600, nó cũng nên thay đổi kích thước (nhưng điều đó không quan trọng lắm vào lúc này)

— jorgen
nguồn

Làm cách nào để yêu cầu nó tạo canvas toàn trang mà không cần cung cấp kích thước và không có thanh cuộn khi thay đổi kích thước?

— jorgen

2

Đừng làm điều đó trong HTML .. làm điều đó với javascript, sử dụng công cụ như appendChild hoặc một cái gì đó và thiết lập chiều rộng và chiều cao để window.innerWidth và window.innerHeight

— các Jinx

173

Cung cấp cho canvas các thuộc tính kiểu css sau:

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

Biên tập

Vì câu trả lời này khá phổ biến, hãy để tôi thêm một chút chi tiết.

Các thuộc tính trên sẽ căn giữa canvas, div hoặc bất kỳ nút nào khác mà bạn có liên quan đến nút cha của nó theo chiều ngang . Không cần phải thay đổi lề và đệm trên cùng hoặc dưới cùng. Bạn chỉ định chiều rộng và để trình duyệt lấp đầy không gian còn lại bằng các lề tự động.

Tuy nhiên, nếu bạn muốn nhập ít hơn, bạn có thể sử dụng bất kỳ thuộc tính viết tắt css nào bạn muốn, chẳng hạn như

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

Tuy nhiên, căn giữa canvas theo chiều dọc yêu cầu một cách tiếp cận khác. Bạn cần sử dụng định vị tuyệt đối và chỉ định cả chiều rộng và chiều cao. Sau đó, đặt các thuộc tính trái, phải, trên và dưới thành 0 và để trình duyệt lấp đầy khoảng trống còn lại bằng các lề tự động.

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

Khung vẽ sẽ tự căn giữa dựa trên phần tử mẹ đầu tiên đã positionđặt thành relativehoặc absolutehoặc phần nội dung nếu không tìm thấy phần tử nào.

Một cách tiếp cận khác sẽ được sử dụng display: flex, có sẵn trong IE11

Ngoài ra, hãy đảm bảo bạn sử dụng loại tài liệu gần đây, chẳng hạn như xhtml hoặc html 5.

— Marco Luglio
nguồn

8

hiển thị: khối; và margin: 0 auto 0 auto; cũng là đủ. Cám ơn!

— Chris

Để căn giữa khung vẽ theo chiều dọc, bạn không cần đặt chiều rộng và chiều cao, miễn là bạn chỉ định nó trong HTML. Trên chrome, dù sao.

— Zac

1

Chiều rộng và chiều cao có thể được chỉ định trong css hoặc html. Nhưng css là cách được khuyến nghị vì tất cả logic trình bày sẽ đến đó.

— Marco Luglio

1

Nó đang căn giữa canvas nhưng nếu có hình ảnh được vẽ trên canvas, nó đang giãn ra. Bạn có thể căn giữa canvas mà không kéo căng hình ảnh không

— aryan 27/09/2016

Việc thiết lập chiều cao và chiều rộng trong các kiểu nội tuyến trên phần tử canvas đã làm xáo trộn kích thước của các hình ảnh đã vẽ của tôi và những thứ tương tự. Chỉ là một lời cảnh báo hy vọng sẽ giúp ai đó bớt thất vọng.

— MrBoJaries,

52

Bạn có thể cung cấp cho canvas của mình các thuộc tính CSS ff:

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

— jinmichaelr
nguồn

Bạn có thể cung cấp một jsfiddle? Cách tiếp cận này dường như không hoạt động

— jose.angel.jimenez

3

Điều này hoạt động để căn giữa theo chiều ngang, nhưng không căn giữa theo chiều dọc.

— Matty J

20

Chỉ cần căn giữa div trong HTML:

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


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

Chỉ cần thay đổi chiều cao và chiều rộng thành bất kỳ thứ gì và bạn đã có một div ở giữa

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

— JoeCianflone
nguồn

Thật may mắn cho tôi, tôi cần cái này ngay sau khi bạn đăng nó. :)

— mcandre

5

Điều này không hoạt động nếu canvas nhỏ hơn container.

— SystemicPlural

8

Để căn giữa phần tử canvas theo chiều ngang, bạn phải chỉ định nó làm mức khối và để các thuộc tính lề trái và phải của nó cho trình duyệt:

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

Nếu bạn muốn căn giữa nó theo chiều dọc, phần tử canvas cần phải được định vị tuyệt đối:

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

Nếu bạn muốn căn giữa nó theo chiều ngang và chiều dọc, hãy làm:

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

Để biết thêm thông tin, hãy truy cập: https://www.w3.org/Style/Examples/007/center.en.html

— Konkret
nguồn

5

Các câu trả lời trên chỉ hoạt động nếu canvas của bạn có cùng chiều rộng với vùng chứa.

Điều này hoạt động bất kể:

#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>

Mở rộng đoạn mã

— SystemicPlural
nguồn

3

Sử dụng mã này:

<!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
nguồn

2

Tôi đã gặp vấn đề tương tự, vì tôi có những bức ảnh có nhiều chiều rộng khác nhau mà tôi chỉ tải với thông tin chiều cao. Đặt chiều rộng cho phép trình duyệt kéo dài và ép hình ảnh. Tôi giải quyết vấn đề bằng cách đặt dòng văn bản ngay trước dòng image_tag ở giữa (cũng loại bỏ float: left;). Tôi đã muốn văn bản được căn trái, nhưng đây là một lỗi nhỏ, mà tôi có thể chịu đựng được.

— MDM
nguồn

0

Thêm text-align: center;vào thẻ mẹ của <canvas>. Đó là nó.

Thí dụ:

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

— Raj Yadav
nguồn

đây là đơn giản sau đó sử dụng css

— Clifton Avil D'Souza