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

Is it possible to set the width and height attributes of a Canvas ID to 90% of the window size?

本文关键字：属性 高度 设置 窗口大小 Canvas 是否 ID      更新时间：2023-09-26

我在使用Sketch.js将窗口大小设置为屏幕大小的90%时遇到问题。

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

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

这是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>

尝试使用css，将canvas、height设置为90vh、width设置为90vw。请参见视口单位：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>

jsfiddlehttp://jsfiddle.net/mqzge8wd/3/

您可以简单地声明一个类似的变量

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

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

var procentOfHeight = $(window).height() * 0.5;
    
    $('#mysketch').sketch();
    $('canvas').css('height', procentOfHeight + 'px');
<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>

相关文章：