循环制作多长canvas
时间: 2023-08-10 22:03:55 浏览: 37
您可以使用循环语句来制作不同大小的canvas。以下是一个示例代码段,用于创建多个不同大小的canvas:
```javascript
function createCanvas(width, height) {
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
return canvas;
}
const sizes = [
{ width: 100, height: 50 },
{ width: 200, height: 100 },
{ width: 300, height: 150 },
// 添加更多尺寸...
];
for (let i = 0; i < sizes.length; i++) {
const { width, height } = sizes[i];
const canvas = createCanvas(width, height);
// 在页面中添加canvas
document.body.appendChild(canvas);
}
```
上述代码使用一个名为`createCanvas`的函数来创建canvas,并接受宽度和高度作为参数。然后,使用一个数组`sizes`来定义不同的宽度和高度组合。通过循环遍历`sizes`数组,创建相应尺寸的canvas,并将其添加到页面中。
您可以根据需要修改`sizes`数组中的尺寸,或者根据其他条件来动态生成不同大小的canvas。