输入n,长宽为2n-1的菱形,用*表示出菱形

8e36492bacc148aea797a26fdb5eddca.png

 

下面是一个示例的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文件中运,根据输入长宽绘制对应的矩形。请注意,这只是一个简单的示例,您可以根据需要进更复杂的定制和改进。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值