如何使画布响应

问题描述 投票：21回答：5

我用bootstrap。我希望用户能够选择画布大小，同时保持设计屏幕在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/

css html5 canvas responsive-design
5个回答
17
投票

改变宽度并不难。只需从标签中删除width属性，然后在css中为width: 100%;添加#canvas

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

改变高度有点困难：你需要javascript。我使用jQuery因为我更舒服。

你需要从canvas标签中删除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>

你可以看到这个小提琴：https://jsfiddle.net/1a11p3ng/3/

编辑：

回答你的第二个问题。你需要javascript

0）首先，我将你的#border id改成了一个类，因为对于html页面内的元素，id必须是唯一的（你不能有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）设置画布的高度和宽度，使其适合容器内部

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

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并且中心div，但如果您使用bootstrap，则无法帮助。然而，这不是响应意味着什么。一个真正响应的网站将调整其大小到用户屏幕，以保持您想要的布局，无需任何外部输入，让用户设置任何可能破坏您的布局的大小并不意味着建立响应式网站。

10
投票

您可以通过3个简单的步骤获得响应式画布：

  1. 从你的width中删除height和<canvas>属性。 <canvas id="responsive-canvas"></canvas>
  2. 使用CSS，将画布的width设置为100%。 #responsive-canvas { width: 100%; }
  3. 使用JavaScript，将高度设置为宽度的某个比例。 var canvas = document.getElementById('responsive-canvas'); var heightRatio = 1.5; canvas.height = canvas.width * heightRatio;
5
投票

这似乎工作：

#canvas{
  border: solid 1px blue; 
  width:100%;
}
5
投票
<div class="outer">
 <canvas id="canvas"></canvas>
</div>    

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

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

用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或风格设置qazxsw poi或qazxsw poi？因为它会拉伸你的画布而不是让它变成期望的尺寸

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.