Question

我无法使用Sketch.js将窗口大小设置为屏幕大小的90％。

我尝试使用Javascript，但它开始画布大小很大（比指定大小大）然后在我开始绘制后达到预期的大小。

我有一个取消绘图按钮，用于关闭绘图，它位于触摸板上。因此，在用户开始绘图之前，取消按钮不可见。

$('#mysketch').sketch();
$('canvas').attr('height', $(window).height() + 'px');

<script src="http://intridea.github.io/sketch.js/lib/sketch.js"></script>
<canvas id='mysketch' style="height:90%; width:100%; border: 1px solid black; "></canvas>

Answer 1

尝试使用css，将canvas height设为90vh，将width设为90vw。请参阅Viewport units: vw, vh, vmin, vmax，<length>

$("#mysketch").sketch();

canvas {
    height:90vh;
    width:90vw;
}

<script src="http://intridea.github.io/sketch.js/lib/sketch.js"></script>
<canvas id='mysketch' style="height:90%; width:100%; border: 1px solid black; "></canvas>

jsfiddle http://jsfiddle.net/mqzge8wd/3/

Answer 2

你可以简单地声明一个像这样的变量

var procentOfHeight = $(window).height() * 0.9;

$('#mysketch').sketch();
$('canvas').css('height', procentOfHeight + 'px');

我已经编辑了代码，并在设置高度时将attr更改为css。现在它的工作。尝试下面我有50％的高度的片段。

＆＃13;

var procentOfHeight = $(window).height() * 0.5;
    
    $('#mysketch').sketch();
    $('canvas').css('height', procentOfHeight + 'px');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://intridea.github.io/sketch.js/lib/sketch.js"></script>
<canvas id='mysketch' style=" width:100%; border: 1px solid black; "></canvas>

＆＃13;

是否可以将Canvas ID的宽度和高度属性设置为窗口大小的90％？

2 个答案: