是否可以获取参数并让用户在 HTML 上输入值答案

【问题标题】：Is it possible to get parameter and let user input values on HTML是否可以获取参数并让用户在 HTML 上输入值
【发布时间】：2018-01-31 10:16:22
【问题描述】：

非常抱歉，我是 JS 和英语的初学者。希望你能理解我的问题。

我想让用户输入他们的值作为函数的参数。有没有可能，怎么做？

function addRect(w, h, scale, rotation) {
    var rect = new fabric.Rect({
        width: w,
        height: h,
        left: 100;
        top: 100;
        angle: rotation,
        fill: 'black';
    });
    
    rect.borderColor = 'gray';
    rect.cornerColor = 'yellow';
    rect.cornerSize = 12;
    rect.transparentCorners = true;
    addElement(rect);
}

<body>
<P>Add Width and Height Here</P>
 width : <input type="number" name="w" id="w"><br>
 height : <input type="number" name="h" id="h"><br>
</body>

【问题讨论】：

标签： javascript html fabricjs

【解决方案1】：

演示

var canvas = new fabric.Canvas('c');
function addRect(){
 var w = document.getElementById('w').value;
 var h = document.getElementById('h').value;
 var r = document.getElementById('r').value;
 //change to number because value gives string
 w = w == '' ? 10 : Number(w);
 h = h == '' ? 10 : Number(h);
 r = r == '' ? 0 : Number(r);
 drawRect(w, h, r);
}

function drawRect(w, h, rotation) {
    var rect = new fabric.Rect({
        width: w,
        height: h,
        left: 100,
        top: 100,
        angle: rotation,
        fill: 'black',
    });
    
    rect.borderColor = 'gray';
    rect.cornerColor = 'yellow';
    rect.cornerSize = 12;
    rect.transparentCorners = true;
    canvas.add(rect);
}

canvas {
 border : 2px dotted blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.17/fabric.min.js"></script>

<P>Add Width and Height Here</P>
 width (px): <input type="number" name="w" id="w"><br>
 height (px): <input type="number" name="h" id="h"><br>
 rotation (degree): <input type="number" name="r" id="r"><br>
 <button onclick='addRect()'>Add Rect</button>
 <canvas id='c' width=400 height=400></canvas>

从您的输入中获取宽度/高度值并转换为数字，因为它给出了字符串值。然后使用您的值创建结构 Rect。

【讨论】：

【解决方案2】：

使用方法.val() - http://api.jquery.com/val/

示例：

function addRect() {
    var w = $('#w').val();
    var h = $('#h').val();
    alert('Height: ' + h + ' Width: ' + w)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<body>
<P>Add Width and Height Here</P>
 width : <input type="number" name="w" id="w"><br>
 height : <input type="number" name="h" id="h"><br>
 <button onclick="addRect()">test</button>
</body>

【讨论】：