让canvas的高度自适应

最新推荐文章于 2025-11-01 00:03:12 发布

原创最新推荐文章于 2025-11-01 00:03:12 发布 · 3.5k 阅读

3 ·

CC 4.0 BY-SA版权

myWork-- 专栏收录该内容

59 篇文章

订阅专栏

本文介绍了一种使用JavaScript来根据窗口高度动态调整HTML Canvas元素尺寸的方法。通过获取窗口的高度，并据此设置Canvas的高度和宽度，确保了Canvas能自适应不同屏幕尺寸。

html: 
<div class="canvas" id="cas1">
                                <canvas class="c2"  id="canvas1" style="position:absolute;" width="47"> </canvas>
                            </div>

js:

$(function () {
    var winH = $(window).height();
  
    $(".musicbg .colnumbg .item1 .canvas").height(winH * 187 / 644);
   
  
    //让canvas的高度等于父亲的高度
    var height = $(".musicbg .colnumbg .item1 .canvas").height(winH * 187 / 644);
    var height = $('.canvas').height();
    $('#canvas1').css("height", height);
    var width = $('.canvas').width();
    $('#canvas1').css("width", width);
});