如何使畫布響應

我使用引導程序。我希望用戶能夠在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>

我怎樣才能限制畫布的大小爲div的大小？

我不知道是否有必要使用JavaScript。

編輯

應當考慮的是，寬度和高度值由用戶輸入和帆布必須在DIV比例在大小

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

來源

2016-01-13 Gislef

你想僅對寬度或高度做出反應嗎？ – valepu

謝謝，寬度和高度 – Gislef

[嘗試]（https://jsfiddle.net/vjdgm9pq/3/）應用引導類 – Artem

改變寬度並不難。單從標籤中刪除width屬性，在CSS中添加width: 100%;爲#canvas

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

更改高度是有點困難：你需要的JavaScript。我已經使用jQuery，因爲我更舒適。

您需要刪除從畫布標記height屬性，並添加這個腳本：

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

你可以看到這個小提琴：

編輯：

要回答你的第二個題。需要Javascript

0）我改變了你的#border ID爲一類，因爲第一ID必須爲一個html頁面中的元素獨特的（你不能有2個標籤具有相同的ID）

.border{ 
    border: solid 1px black; 
} 

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

1）改變了你的HTML添加在需要的地方的ID，兩個輸入端和一個按鈕，以使其適應在容器

內設置的值的

<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）設置在畫布的高度和寬度

3）設置的寬度值和高度形成

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

4）最後，只要你點擊按鈕，設置畫布寬度和高度設置的值。如果寬度值大於容器的寬度更大然後它會調整畫布到容器的寬度，而不是（否則它會破壞你的佈局）

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

在這裏看到一個完整的例子https://jsfiddle.net/1a11p3ng/7/

更新2：

要具有在寬度上完全控制你可以使用這個：

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

如果寬度過高，則剩餘內容和內容右側列將移動到上方並且喜歡中央div，但如果使用引導程序，則無法提供幫助。但是，這不是什麼反應意味着什麼。一個真正具有響應能力的網站將根據用戶屏幕調整其大小以保持佈局的原樣，而無需任何外部輸入，讓用戶設置任何可能破壞佈局的大小並不意味着要做出響應的網站。

來源

2016-01-13 17:32:30 valepu

我認爲你正在尋找'max-width'而不是'width' –

感謝，寬度和高度由用戶輸入，我更新了我的問題 – Gislef

@TinyGiant沒有，因爲他使用引導列布局，畫布大小將與屏幕成比例。 Zeli這是一個完全不同的問題。我會盡量給出答案 – valepu

這似乎是工作：

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

來源

2016-01-13 17:32:17 TheGrum

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

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

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

來源

2017-06-27 14:40:17

延長接受的答案使用jQuery

什麼，如果你想添加更多的帆布？，這jquery.each解答一下

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); 
    }) 

}

它會做一切爲你的工作

爲什麼我們不通過css或style設置width或height？因爲它會拉伸你的畫布，而不是讓它變成期待的尺寸

來源

2017-12-14 09:48:17

如何使畫布響應

回答

相關問題