我是新手,并且正在开发一个项目以帮助解决这个问题.我还不太了解.
我有2列：col-xs-3和col-xs-9.在第9列中,我有一个画布,我想保留一个特定的宽高比.我实际上并不关心宽高比是什么,只要它在各处都是一样的.具体而言,与列一样宽,并且给定宽度的高度适当.
我已经尝试使用百分比来表示宽度和高度,但即使它确实有效,它在动态高度列中也不太理想.
解决方法
这个例子适合我.我认为您需要做两件事：记住在画布上设置宽度和高度属性,然后可以将画布宽度设置为100％,将高度设置为自动.它应该使画布始终是其容器的整个宽度,并强制其高度保持成比例.
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 <canvas> 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,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,2*Math.PI);
ctx.stroke();
});
