Question

我有一个画布，我正在努力做出回应。我已经摆弄并找到了一个解决方案，使其响应，但现在问题是保持纵横比。画布宽度为600，高度为400，因此比例为3：2。

我正在使用它：

<div id="container">


    <div id="main" role="main">
        <canvas id="respondCanvas" width="600" height="400">
            <!-- Provide fallback -->
        </canvas>
    </div>

</div> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<script type="text/javascript">


$(document).ready( function(){

        //Get the canvas & context
        var c = $('#respondCanvas');
        var ct = c.get(0).getContext('2d');
        var container = $(c).parent();

        //Run function when browser  resize
        $(window).resize( respondCanvas );

        function respondCanvas(){
            c.attr('width', $(container).width() ); //max width
            c.attr('height', $(container).height() ); //max height

            //Redraw & reposition content
            var x = c.width();
            var y = c.height();             
            ct.font = "20px Calibri";

            ct.fillStyle = "#DDDDDD"; //black
            ct.fillRect( 0, 0, x, y); //fill the canvas

            var resizeText = "Canvas width: "+c.width()+"px";
            ct.textAlign = "center";
            ct.fillStyle = "#333333"; //white
            ct.fillText(resizeText, (x/2), (y/2) );
        }

        //Initial call
        respondCanvas();
    });


  </script>

Answer 1

我认为保持比例的简单方法是用img标签替换画布，并使用画布数据设置img src：

.the-img{max-width:100%}

添加样式：

new_width = x, 
new_height = pre_height/pre_width * x

到img，然后img将通过保持比率来调整其父容器的大小。

如果必须使用画布，则可以使用new_height / new_width = ratio重绘画布：

例如：

{{1}}

Answer 2

谢谢你们的支持，但现有的脚本几乎没有必要。

function respondCanvas(){
        c.attr('width', $(container).width() ); //max width
        c.attr('height', $(container).width() / 1.5 ); //max height

在保持画布比例3：2的同时调整画布大小

2 个答案: