Bootstrap列中的响应画布？

Question

我是新手,并且正在开发一个项目以帮助解决这个问题.我还不太了解.

我有2列:col-xs-3和col-xs-9.在第9列中,我有一个画布,我想保留一个特定的宽高比.我实际上并不关心宽高比是什么,只要它在各处都是一样的.具体而言,与列一样宽,并且给定宽度的高度适当.

我已经尝试使用百分比来表示宽度和高度,但即使它确实有效,它在动态高度列中也不太理想.

Answer 1

这个例子适合我.我认为你需要做两件事:记住在画布上设置width和height属性,然后你可以设置画布宽度100%和它的高度auto.它应该使画布始终是其容器的整个宽度,并强制其高度保持成比例.

CSS:

canvas {
  background-color: blue; 
  width: 100%;
  height: auto;
}

HTML:

<div class="container">
      <div class="row">
        <div class="col-md-4">
            <canvas id="canvas" width="300" height="300">
              Sorry, your browser doesn't support the &lt;canvas&gt; element.
            </canvas>
        </div> <!-- /col-md-4 -->
        <div class="col-md-4">
            <p>item 1: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div> <!-- /col-md-4 -->
        <div class="col-md-4">
            <p>item 2: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div> <!-- /col-md-4 -->
      </div> <!-- /row -->
    </div>

JS:

$( document ).ready(function() {

    var c=document.getElementById("canvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.arc(95,50,40,0,2*Math.PI);
    ctx.stroke();

});

一个小提琴演示