Javascript 获取宽度和高度的更新_Javascript_Html5 Canvas_Fabricjs

Javascript 获取宽度和高度的更新

javascript html5-canvas

Javascript 获取宽度和高度的更新,javascript,html5-canvas,fabricjs,Javascript,Html5 Canvas,Fabricjs,我可以更新HTML上显示的rect的宽度和高度吗？因为rect可以缩放宽度和高度，所以我希望它也能更新，但我不知道如何更新。有什么解决办法吗 <html> <canvas id="c" width="900" height="720"></canvas> <p id="show"></p> <button onclick="addRect2()">Rect</button> <script src="ht

我可以更新HTML上显示的rect的宽度和高度吗？因为rect可以缩放宽度和高度，所以我希望它也能更新，但我不知道如何更新。有什么解决办法吗

<html>
<canvas id="c" width="900" height="720"></canvas>
<p id="show"></p>
<button onclick="addRect2()">Rect</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.js"></script>

</html>

尝试使用这些JS代码。确保将fabric.js库导入html代码

var宽度；
变异高度；
window.addRect2=函数（宽度、高度）{
var canvas=newfabric.canvas（'c'）；
var rect=new fabric.rect({
左:100,，
前100名，
填充：“黑色”，
宽度：250，
身高：250，
});
canvas.add（rect）；
宽度=矩形宽度；
高度=垂直高度；
document.getElementById（“show”）.innerHTML=“宽度和高度”+宽度+”+高度；}



Rect

var宽度、高度；
var canvas=newfabric.canvas（'c'）；
var rect=new fabric.rect({
左:100,，
前100名，
填充：“黑色”，
宽度：250，
身高：250，
});
canvas.add（rect）；
var el=document.getElementById（“显示”）；
displayDim（）；
on（'modified'，function（）{
displayDim（）；
})
rect.on（'scaling'，function（）{
displayDim（）；
})
函数displayDim（）{
宽度=parseInt（rect.width*rect.scaleX）；
高度=parseInt（rect.height*rect.scaleY）；
el.innerHTML=“宽度：“+Width+”px和高度：“+Height+”px”；
}


document.getElementById（“c”）.style.width=“300px”var width;
var height;
var canvas = new fabric.Canvas('c');
window.addRect2 = function(width,height){
    var rect = new fabric.Rect({
    left: 100,
    top: 100,
    fill: 'black',
    width: 250,
    height: 250,
});
canvas.add(rect);
width = rect.width;
height = rect.height;
document.getElementById("show").innerHTML = "Width and Height" + width " " + height;}