带有纯 CSS 的方形 HTML 画布

Question

假设我有一个尺寸为 500 x 500 的 HTML 画布。以下 CSS 代码创建了一个填充宽度并将高度设置为相同值的画布，使其保持为方形画布。

canvas {
    width: 100%;
    height: auto;
}

有人会认为将其更改为以下 CSS 代码会使画布填充高度并设置等效宽度，使其保持正方形。 （这将用于横向模式等情况）

canvas {
    width: auto;
    height: 100%;
}

但事实并非如此。画布恢复到原来的 500 x 500。这是一个 JFiddle 示例：http://jsfiddle.net/0qp5zkgu/ 示例中的画布是 50 x 50，因此更容易看出差异。

Answer 1

您将不得不使用 javascript 来设置宽度和高度。

这是一个例子::

HTML：

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

CSS：

#main{
    display:block;
    width:100%;
} 

JS：

$(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).width() ); //set the height to the width to make a square

    //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();
});

小提琴:: http://jsfiddle.net/dp40Lbux/1/