Html 如何使画布响应

Question

提问by Gislef

I use bootstrap. I want the user to be able to choose the canvas size while keeping the design screen responsive within the div.

我使用引导程序。我希望用户能够选择画布大小，同时保持 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>

How can I limit the size of the canvas to the size of the div?

如何将画布的大小限制为 div 的大小？

I do not know if it will be necessary to use JavaScript.

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

Edit

编辑

It should be taken into account that the width and height values are entered by the user and the canvas must be in div proportional in size

需要注意的是，宽高值是用户输入的，画布的大小必须在div中成比例

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

Answer 1

采纳答案by valepu

To change width is not that hard. Just remove the widthattribute from the tag and add width: 100%;in the css for #canvas

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

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

Changing height is a bit harder: you need javascript. I have used jQuery because i'm more comfortable with.

改变高度有点困难：你需要javascript。我使用了 jQuery，因为我更习惯。

you need to remove the heightattribute from the canvas tag and add this script:

您需要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>

You can see this fiddle: https://jsfiddle.net/1a11p3ng/3/

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

EDIT:

编辑：

To answer your second question. You need javascript

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

0) First of all i changed your #border id into a class since ids must be unique for an element inside an html page (you can't have 2 tags with the same id)

0）首先，我将您的#border id 更改为一个类，因为 html 页面内的元素的 id 必须是唯一的（您不能有 2 个具有相同 id 的标签）

.border{
  border: solid 1px black;
}

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

1) Changed your HTML to add ids where needed, two inputs and a button to set the values

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) Set the canvas height and width so that it fits inside the container

2) 设置画布高度和宽度，使其适合容器内

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

3) Set the values of the width and height forms

3) 设置宽高形式的值

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

4) Finally, whenever you click on the button you set the canvas width and height to the values set. If the width value is bigger than the container's width then it will resize the canvas to the container's width instead (otherwise it will break your layout)

4) 最后，无论何时单击按钮，都将画布宽度和高度设置为设置的值。如果宽度值大于容器的宽度，那么它会将画布调整为容器的宽度（否则会破坏您的布局）

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

See a full example here https://jsfiddle.net/1a11p3ng/7/

在此处查看完整示例https://jsfiddle.net/1a11p3ng/7/

UPDATE 2:

更新 2：

To have full control over the width you can use this:

要完全控制宽度，您可以使用：

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

the content left and content right columns will move above and belove the central div if the width is too high, but this can't be helped if you are using bootstrap. This is not, however, what responsive means. a truly responsive site will adapt its size to the user screen to keep the layout as you have intended without any external input, letting the user set any size which may break your layout does not mean making a responsive site.

如果宽度太高，内容左列和内容右列将移动到上方并喜欢中央 div，但如果您使用引导程序，这将无济于事。然而，这并不是响应式的意思。一个真正的响应式站点会根据用户屏幕调整其大小以保持布局如您所愿，无需任何外部输入，让用户设置可能破坏布局的任何大小并不意味着制作响应式站点。

Answer 2

回答by Faheel

You can have a responsive canvas in 3 short and simple steps:

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

Remove the widthand heightattributes from your <canvas>.
```
<canvas id="responsive-canvas"></canvas>
```
Using CSS, set the widthof your canvas to 100%.
```
#responsive-canvas {
  width: 100%;
}
```

Using JavaScript, set the height to some ratio of the width.

var canvas = document.getElementById('responsive-canvas');
var heightRatio = 1.5;
canvas.height = canvas.width * heightRatio;

取出width并height从您的属性<canvas>。
```
<canvas id="responsive-canvas"></canvas>
```
使用 CSS，将width画布的设置为100%.
```
#responsive-canvas {
  width: 100%;
}
```

使用 JavaScript，将高度设置为宽度的某个比例。

var canvas = document.getElementById('responsive-canvas');
var heightRatio = 1.5;
canvas.height = canvas.width * heightRatio;

Answer 3

回答by Michael Sherris Caley

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

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

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

Answer 4

回答by TheGrum

this seems to be working :

这似乎有效：

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

Answer 5

回答by david valentino

extending accepted answer with jquery

用 jquery 扩展接受的答案

what if you want to add more canvas?, this jquery.each answer it

如果你想添加更多画布怎么办？，这个 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);
  })

}

it will do all the job for you

它会为你做所有的工作

why we dont set the widthor the heightvia css or style? because it will stretch your canvas instead of make it into expecting size

为什么我们不设置width或height通过 css 或样式？因为它会拉伸你的画布而不是让它变成预期的尺寸

Answer 6

回答by Michael Cole

There's a better way to do this in modern browsers using the vhand vwunits.

在现代浏览器中使用vh和vw单位有更好的方法来做到这一点。

vh is the viewport height.

vh 是视口高度。

So you can try something like this:

所以你可以尝试这样的事情：

<style>
canvas {
  border: solid 2px purple;
  background-color: green;
  width: 100%;
  height: 80vh;
}
</style>

This will distort the aspect ration.

这将扭曲纵横比。

You can keep the aspect ratio by using the same unit for each. Here's an example with a 2:1 aspect ratio:

您可以通过对每个单位使用相同的单位来保持纵横比。这是一个宽高比为 2:1 的示例：

<style>
canvas {
  width: 40vh;
  height: 80vh;
}
</style>

Answer 7

回答by Sanusi hassan

try using max-width: 100%;on your canvas.

尝试max-width: 100%;在画布上使用。

canvas {
  max-width: 100%;
}

Html 如何使画布响应

提问by Gislef

采纳答案by valepu

回答by Faheel

回答by Michael Sherris Caley

回答by TheGrum

回答by david valentino

回答by Michael Cole

回答by Sanusi hassan

相关推荐

最近更新

标签

Html 如何使画布响应

提问by Gislef

采纳答案by valepu

回答by Faheel

回答by Michael Sherris Caley

回答by TheGrum

回答by david valentino

回答by Michael Cole

回答by Sanusi hassan

相关推荐

Html 使所有图像在引导程序中以相同的高度出现

Html 在一页中使用多个模态对话框

Html 在html中跳过一行的最佳方法？

Html SVG 图标不工作

相关推荐

最近更新

标签