首页使用form表单绘制图形

使用form表单绘制图形

时间: 2024-01-04 17:44:59 浏览: 80

使用Windows Forms生成简单的绘图工具

在HTML中，可以使用canvas元素来绘制图形。canvas元素可以使用JavaScript中的API进行绘制。下面是一个使用form表单绘制图形的示例代码： ```html <!DOCTYPE html> <html> <head> <title>绘制图形</title> <script> function drawShape() { // 获取表单数据 var shape = document.getElementById("shape").value; var color = document.getElementById("color").value; var width = document.getElementById("width").value; var height = document.getElementById("height").value; // 获取canvas元素 var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); // 绘制图形 ctx.fillStyle = color; if (shape == "square") { ctx.fillRect(0, 0, width, height); } else if (shape == "circle") { ctx.beginPath(); ctx.arc(width/2, height/2, width/2, 0, 2*Math.PI); ctx.fill(); } } </script> </head> <body> <form> <label>形状：</label> <select id="shape"> <option value="square">正方形</option> <option value="circle">圆形</option> </select> <br> <label>颜色：</label> <input type="color" id="color"> <br> <label>宽度：</label> <input type="number" id="width"> <br> <label>高度：</label> <input type="number" id="height"> <br> <button type="button" onclick="drawShape()">绘制</button> </form> <canvas id="canvas" width="300" height="300"></canvas> </body> </html> ``` 在这个示例代码中，我们使用了一个form表单来获取绘制图形所需的参数。当用户点击“绘制”按钮时，会调用drawShape函数来绘制图形。根据用户选择的形状，我们使用canvas元素的API来绘制正方形或圆形。最终的图形将显示在canvas元素中。

阅读全文