根据输入值绘制多个 HTML 画布

Question

我有一个正在进行的项目，我需要根据输入字段中输入的数字绘制多个 HTML 画布（从 1 到 10）。

也许更简单的方法是在绘制之前已经在 DOM 中拥有画布，但是这个函数中的所有内容都需要动态发生，因此需要使用 JavaScript 函数绘制画布本身。我使用 switch 语句取得了更好的进展，但我觉得 for 循环更合适。

由于某种原因，Fiddle 无法正常工作，但该按钮在我的 Cloud9 环境中可以正常绘制单个画布。现在我只需要它来绘制一些与输入值对应的画布。

JS 小提琴：https://jsfiddle.net/m4hys8tr/

HTML：

<form action='#' method='get' name=queueform id=queue>
    <div id='queueblock'>
        <div class='formblock'>
          <div class='row'>
            <div class='cell'>
                <strong>Quantity:</strong><br>
                <hr>
                    <label for='items'>Items:</label>
                    <input id='quantity' size='2' type='text'><br><br>
                    <strong><p>Enter a maximum of 10 items</p></strong>
            </div>
            <div class='cell'><br><br>
                <div>
                    <button onclick='drawCanvas()' id='getitemsbutton' class='button' type='button'>Get Items</button>
                    <button id='clearbutton' class='button' type='reset'>Clear</button>
                    <button id='queuebutton' class='button' type='submit'>Send to Queue</button>
                </div>
                </div>   

JS：

function drawCanvas() {
    var canvasBlock = document.getElementById('canvasblock');
    var canvas = document.createElement('canvas');
    var quantity = document.queueform.quantity.value;
        canvas.id = 'canvas01', 'canvas02', 'canvas03', 'canvas04',
                    'canvas05', 'canvas06', 'canvas07', 'canvas08',
                    'canvas09', 'canvas010';
        canvas.width = 70;
        canvas.height = 70;
        canvas.style.border = '1px solid';
    for (var i = 0; i < quantity; i++) {
        canvasBlock.appendChild(canvas);
    }
    var c1 = document.getElementById('canvas01');
    console.log(c1);
}

Answer 1

奇怪的是，JS Fiddle 目前似乎被窃听了。 无论如何，您已经非常接近了，但是您没有考虑到必须为要创建的每个画布调用 document.createElement() 的事实。我稍微重新排列了您的代码，并将硬编码的 id 分配替换为动态的。

function drawCanvas() {
    var canvasBlock = document.getElementById('canvasblock');
    var quantity = document.queueform.quantity.value;
    for (var i = 0; i < quantity; i++) {
        var canvas = document.createElement('canvas');
        canvas.id = 'canvas'+('0' + i).slice(-2) // generate name dynamically. ('0' + i).slice(-2) is a trick to add a zero if the current number is < 10
        canvas.width = 70;
        canvas.height = 70;
        canvas.style.border = '1px solid';
        canvasBlock.appendChild(canvas);
    }
    var c1 = document.getElementById('canvas01');
    console.log(c1);
}

<div id='canvasblock'>
    </div>
    
<form action='#' method='get' name=queueform id=queue>
  <div id='queueblock'>
    <div class='formblock'>
      <div class='row'>
        <div class='cell'>
          <strong>Quantity:</strong><br>
            <hr>
            <label for='items'>Items:</label>
              <input id='quantity' size='2' type='text'><br><br>
              <strong><p>Enter a maximum of 10 items</p></strong>
        </div>
        <div class='cell'><br><br>
        <div>
        <button onclick='drawCanvas()' id='getitemsbutton' class='button' type='button'>Get Items</button>
        <button id='clearbutton' class='button' type='reset'>Clear</button>
        <button id='queuebutton' class='button' type='submit'>Send to Queue</button>
      </div>
    </div>