如何使画布响应

我使用引导程序。我希望用户能够在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

如何使画布响应

回答

相关问题