首页canvas 画多个矩形

canvas 画多个矩形

时间: 2023-06-16 18:07:00 浏览: 148

可以使用循环来在 canvas 中画多个矩形，以下是一个示例代码： ```html <!DOCTYPE html> <html> <head> <title>Canvas 画多个矩形</title> <style type="text/css"> canvas { border: 1px solid #000; } </style> </head> <body> <canvas id="myCanvas" width="400" height="400"></canvas> <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); // 定义矩形数量和宽高 var rectCount = 5; var rectWidth = 50; var rectHeight = 50; // 循环画矩形 for (var i = 0; i < rectCount; i++) { var x = i * (rectWidth + 10); // 计算矩形的 x 坐标 var y = 50; // 矩形的 y 坐标 ctx.fillRect(x, y, rectWidth, rectHeight); // 画矩形 } </script> </body> </html> ``` 该示例代码中，通过循环来画出了 5 个宽高为 50 的矩形，每个矩形之间间隔 10 个像素。你可以根据需要修改矩形数量、宽高以及间隔大小。

阅读全文