javascript 如何调整画布使用他的高度和宽度属性，每次它的大小

lxkprmvk 于 2023-02-07 发布在 Java

关注(0)|答案(1)|浏览(120)

我有下面的画布，这是得到更新时，div得到调整大小。

<canvas class="canvas" tabindex="0" width="511" height="333" style="position: absolute; left: 0px; top: 0px;"></canvas>
<br>
<canvas class="canvas" tabindex="0" width="232" height="1333" style="position: absolute; left: 0px; top: 0px;"></canvas>

我尝试使用下面的代码

window.addEventListener('resize',function(){
let mapwidth = $('.canvas').attr("width")
let mapHeight = $('.canvas').attr("height")

console.log(mapwidth ,mapHeight)

$('.canvas').css("width",mapwidth);
$('.canvas').css("height",mapHeight);
})

但它不工作不知何故我只得到00
1.我的问题是如何在内联样式中获得当前画布的高度和宽度。
1.现在，相同的高度和宽度得到应用于所有的画布，但我希望不同的所有画布的基础上，他们的属性
恳请

JavaScript

来源：https://stackoverflow.com/questions/75363233/how-to-resize-canvas-using-his-height-and-width-attribute-on-every-time-its-get

1条答案

按热度按时间

euoag5mw1#

因此，由于您希望对.each().canvas class元素执行此操作，因此必须使用jQuery选择器（$(".canvas")）选择所有这些类，然后使用.each()方法迭代它们。
示例：

$(".canvas").each(function()
{
    console.log(this.height, this.width);
});

上面的代码将打印每个.canvas元素的当前宽度和高度。
此外，还可以根据所需属性添加逻辑，例如：

$(".canvas").each(function()
{
    console.log(this.height, this.width);
    if ($(this).attr("height") > 50)
    {
        console.log("Greater than 50.");
    }
    else
    {
        console.log("Not greater than 50.");
    }
    // You can also use the ternary operator to shorten the above if statement to:
    // $(this).attr("height") > 50? console.log("Greater than 50."): console.log("Not greater than 50.");
});

下面是第一个代码片段的示例--当然，您必须调整页面的大小，才能让它执行任何操作。
一个一个二个一个一个一个三个一个一个一个一个一个四个一个
编辑：
我认为事件侦听器被添加到这个代码片段中两次，不是因为代码本身，而是可能SO页面在加载它之前运行了这个片段？

赞(0）回复(0）举报 2023-02-07

我来回答

javascript 如何调整画布使用他的高度和宽度属性，每次它的大小

1条答案

相关问题

热门标签

最新问答