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/

带纯CSS的方形HTML画布

1 个答案: