首页写一个html网页，根据输入的长宽用canvas划出

写一个html网页，根据输入的长宽用canvas划出

时间: 2024-04-15 08:27:52 浏览: 117

下面是一个示例的HTML网页，可以根据用户输入的长宽使用Canvas绘制矩形： ```html <!DOCTYPE html> <html> <head> <title>Canvas绘制矩形</title> <style> canvas { border: 1px solid #000; } </style> </head> <body> <label for="widthInput">宽度：</label> <input type="number" id="widthInput"> <br> <label for="heightInput">高度：</label> <input type="number" id="heightInput"> <br> <button onclick="drawRectangle()">绘制矩形</button> <br> <canvas id="myCanvas" width="400" height="400"></canvas> <script> // 获取Canvas元素 const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); // 绘制矩形函数 function drawRectangle() { const widthInput = document.getElementById('widthInput'); const heightInput = document.getElementById('heightInput'); const width = parseInt(widthInput.value); const height = parseInt(heightInput.value); ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布 ctx.strokeStyle = '#000'; ctx.strokeRect(0, 0, width, height); } </script> </body> </html> ``` 在上述代码中，我们使用了两个输入框和一个按钮，用户可以在输入框中输入矩形的宽度和高度。点击按钮后，调用`drawRectangle()`函数，从输入框中获取宽度和高度的值，并使用Canvas的绘图上下文对象ctx绘制矩形。您可以将代码复制粘贴到HTML文件中运行，根据输入的长宽绘制出对应的矩形。请注意，这只是一个简单的示例，您可以根据需要进行更复杂的定制和改进。

阅读全文