使用用户输入在 Canvas 中绘制矩形 (1)

📌 相关文章

📜 使用用户输入在 Canvas 中绘制矩形 (1)

📅 最后修改于: 2023-12-03 15:22:25.537000 🧑 作者: Mango

使用用户输入在 Canvas 中绘制矩形

在 Canvas 中，可以通过提供的 API 绘制出各种形状，其中矩形是最简单的一种。而且，通过获取用户的输入，还可以实现绘制用户自定义大小和颜色的矩形。

实现步骤

获取用户输入的宽度、高度和颜色。
获取 Canvas 元素，并设置其宽度和高度。
获取绘制上下文 Context，并设置矩形的边框颜色和线宽。
调用 Context 的 fillRect() 方法，传入用户输入的参数绘制矩形。
如果需要绘制边框，可以调用 Context 的 strokeRect() 方法实现。

下面是一个示例代码，展示了如何通过用户输入绘制一个红色矩形。

<html>
  <body>
    <h2>绘制矩形</h2>
    <div>宽度：<input type="number" id="widthInput" value="100"></div>
    <div>高度：<input type="number" id="heightInput" value="60"></div>
    <div>颜色：<input type="color" id="colorInput" value="#ff0000"></div>
    <canvas id="myCanvas"></canvas>

    <script>
      const canvas = document.getElementById('myCanvas');
      canvas.width = 300;
      canvas.height = 200;
      const ctx = canvas.getContext('2d');
      ctx.strokeStyle = '#000000';
      ctx.lineWidth = 2;

      const widthInput = document.getElementById('widthInput');
      const heightInput = document.getElementById('heightInput');
      const colorInput = document.getElementById('colorInput');

      function drawRect() {
        const width = parseInt(widthInput.value);
        const height = parseInt(heightInput.value);
        const color = colorInput.value;

        ctx.fillStyle = color;
        ctx.fillRect(50, 50, width, height);
        ctx.strokeRect(50, 50, width, height);
      }

      drawRect();
    </script>
  </body>
</html>

注意事项

Canvas 绘制矩形时，填充和边框的颜色需要分别设置。
fillRect() 和 strokeRect() 方法接收的参数是矩形的左上角 x、y 坐标，以及矩形的宽度和高度。
绘制完成后，绘制的矩形将覆盖之前的内容，因此需要在绘制前将 Canvas 元素清空，或者在绘制时使用 save() 和 restore() 方法保留之前的内容。
绘制边框时，需要根据设置的线宽进行调整，否则矩形的大小会比预期的要小。