Cách tạo canvas responsive

Question

Tôi sử dụng bootstrap. Tôi muốn người dùng có thể chọn kích thước canvas trong khi vẫn giữ màn hình thiết kế đáp ứng trong div.

<div class="row"> 
    <div class="col-xs-2 col-sm-2" id="border">content left</div> 
    <div class="col-xs-6 col-sm-6" id="border"> 
    Width <input type="number" class="form-control"><br> 
    Height <input type="number" class="form-control"><br> 
    canvas 
    <canvas id="canvas" width="500" height="300"> 
    </canvas> 

    </div> 
    <div class="col-xs-2 col-sm-2" id="border">content right</div> 

Làm cách nào để giới hạn kích thước của canvas với kích thước của div?

Tôi không biết liệu có cần sử dụng JavaScript hay không.

---

Sửa

Nó nên được đưa vào tài khoản đó chiều rộng và chiều cao giá trị được nhập vào bởi người sử dụng và vải phải nằm trong div tỷ lệ thuận với kích thước

https://jsfiddle.net/1a11p3ng/2/

Answer 1

Để thay đổi chiều rộng không phải là khó. Chỉ cần loại bỏ các thuộc tính width từ thẻ và thêm width: 100%; trong css cho #canvas

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

Thay đổi chiều cao là một chút khó khăn hơn: bạn cần javascript. Tôi đã sử dụng jQuery vì tôi cảm thấy thoải mái hơn.

bạn cần phải loại bỏ các height thuộc tính từ thẻ canvas và thêm kịch bản này:

<script> 
    function resize(){  
    $("#canvas").outerHeight($(window).height()-$("#canvas").offset().top- Math.abs($("#canvas").outerHeight(true) - $("#canvas").outerHeight())); 
    } 
    $(document).ready(function(){ 
    resize(); 
    $(window).on("resize", function(){      
     resize(); 
    }); 
    }); 
    </script> 

Bạn có thể thấy fiddle này:

EDIT:

Để trả lời câu thứ hai của bạn câu hỏi. Bạn cần javascript

0) Trước hết tôi thay đổi id #border của bạn thành một lớp từ id phải là duy nhất cho một yếu tố bên trong một trang html (bạn không thể có 2 thẻ với cùng id)

.border{ 
    border: solid 1px black; 
} 

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

1) Thay đổi HTML của bạn để thêm id khi cần thiết, hai đầu vào và một nút để thiết lập các giá trị

<div class="row"> 
    <div class="col-xs-2 col-sm-2 border">content left</div> 
    <div class="col-xs-6 col-sm-6 border" id="main-content"> 
    <div class="row"> 
     <div class="col-xs-6"> 
     Width <input id="w-input" type="number" class="form-control"> 
     </div> 
     <div class="col-xs-6"> 
     Height <input id="h-input" type="number" class="form-control"> 
     </div> 
     <div class="col-xs-12 text-right" style="padding: 3px;"> 
     <button id="set-size" class="btn btn-primary">Set</button> 
     </div> 
    </div> 
    canvas 
    <canvas id="canvas"></canvas> 

    </div> 
    <div class="col-xs-2 col-sm-2 border">content right</div> 
</div> 

2) thiết lập chiều cao và chiều rộng vải để nó phù hợp với bên trong container

$("#canvas").outerHeight($(window).height()-$("#canvas").offset().top-Math.abs($("#canvas").outerHeight(true) - $("#canvas").outerHeight())); 

3) Thiết lập các giá trị của chiều rộng và chiều cao hình

$("#h-input").val($("#canvas").outerHeight()); 
$("#w-input").val($("#canvas").outerWidth()); 

4) Cuối cùng, bất cứ khi nào bạn bấm vào nút bạn thiết lập chiều rộng và chiều cao vải với các giá trị thiết lập.Nếu giá trị chiều rộng lớn hơn chiều rộng của thùng chứa sau đó nó sẽ thay đổi kích thước canvas với chiều rộng của thùng chứa để thay thế (nếu không nó sẽ phá vỡ bố cục của bạn)

$("#set-size").click(function(){ 
     $("#canvas").outerHeight($("#h-input").val()); 
     $("#canvas").outerWidth(Math.min($("#w-input").val(), $("#main-content").width())); 
    }); 

Xem một ví dụ đầy đủ ở đây https://jsfiddle.net/1a11p3ng/7/

UPDATE 2:

Để có toàn quyền kiểm soát chiều rộng, bạn có thể sử dụng này:

<div class="container-fluid"> 
<div class="row"> 
    <div class="col-xs-2 border">content left</div> 
    <div class="col-xs-8 border" id="main-content"> 
    <div class="row"> 
     <div class="col-xs-6"> 
     Width <input id="w-input" type="number" class="form-control"> 
     </div> 
     <div class="col-xs-6"> 
     Height <input id="h-input" type="number" class="form-control"> 
     </div> 
     <div class="col-xs-12 text-right" style="padding: 3px;"> 
     <button id="set-size" class="btn btn-primary">Set</button> 
     </div> 
    </div> 
     canvas 
    <canvas id="canvas"> 

    </canvas> 

    </div> 
    <div class="col-xs-2 border">content right</div> 
</div> 
</div> 
    <script> 
    $(document).ready(function(){ 
    $("#canvas").outerHeight($(window).height()-$("#canvas").offset().top-Math.abs($("#canvas").outerHeight(true) - $("#canvas").outerHeight())); 
    $("#h-input").val($("#canvas").outerHeight()); 
    $("#w-input").val($("#canvas").outerWidth()); 
    $("#set-size").click(function(){ 
     $("#canvas").outerHeight($("#h-input").val()); 
     $("#main-content").width($("#w-input").val()); 
     $("#canvas").outerWidth($("#main-content").width()); 
    }); 
    }); 
    </script> 

https://jsfiddle.net/1a11p3ng/8/

nội dung bên trái và cột nội dung bên phải sẽ di chuyển phía trên và bỏ div trung tâm nếu chiều rộng quá cao, nhưng điều này không thể tránh được nếu bạn đang dùng bootstrap. Đây không phải là, tuy nhiên, những gì có nghĩa là đáp ứng. một trang web thực sự đáp ứng sẽ điều chỉnh kích thước của nó thành màn hình người dùng để giữ bố cục như bạn dự định mà không có bất kỳ đầu vào bên ngoài nào, cho phép người dùng đặt bất kỳ kích thước nào có thể phá vỡ bố cục của bạn không có nghĩa là tạo trang web đáp ứng.

Answer 2

điều này có vẻ đang hoạt động:

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

Answer 3

<div class="outer"> 
<canvas></canvas> 
</div>  

.outer { 
position: relative; 
width: 100%; 
padding-bottom: 100%; 
} 

#canvas { 
position: absolute; 
width: 100%; 
height: 100%; 
} 

Answer 4

mở rộng câu trả lời chấp nhận với jquery

gì nếu bạn muốn thêm vải?, Đây jquery.each trả lời nó

responsiveCanvas(); //first init 
$(window).resize(function(){ 
    responsiveCanvas(); //every resizing 
    stage.update(); //update the canvas, stage is object of easeljs 

}); 
function responsiveCanvas(target){ 
    $(canvas).each(function(e){ 

    var parentWidth = $(this).parent().outerWidth(); 
    var parentHeight = $(this).parent().outerHeight(); 
    $(this).attr('width', parentWidth); 
    $(this).attr('height', parentHeight); 
    console.log(parentWidth); 
    }) 

} 

nó sẽ làm tất cả công việc cho bạn

lý do tại sao chúng tôi không đặt width hoặc height qua css hoặc kiểu? bởi vì nó sẽ kéo căng canvas của bạn thay vì biến nó thành kích thước mong đợi