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

Question

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

我尝试使用 Javascript，但它开始时 Canvas 尺寸很大(比指定尺寸大很多)，然后在我开始绘制后它达到预期尺寸。

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

这是 JS Fiddle

---

$('#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/