要求每次刷新都可以生成1~10大小的矩阵动画
时间: 2024-02-02 15:04:58 浏览: 24
您可以使用 JavaScript 中的 Math.random() 方法生成 1~10 的随机数,并使用 HTML5 中的 `<canvas>` 元素绘制矩阵动画。以下是一个简单的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>矩阵动画</title>
<style>
canvas {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h1>矩阵动画</h1>
<canvas id="matrix" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById("matrix");
var ctx = canvas.getContext("2d");
var rows = 10;
var cols = 10;
var cellWidth = canvas.width / cols;
var cellHeight = canvas.height / rows;
function drawMatrix() {
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw cells
for (var row = 0; row < rows; row++) {
for (var col = 0; col < cols; col++) {
var x = col * cellWidth;
var y = row * cellHeight;
var value = Math.floor(Math.random() * 10) + 1;
ctx.fillStyle = "rgb(0, " + value * 25 + ", 0)";
ctx.fillRect(x, y, cellWidth, cellHeight);
}
}
}
// Redraw matrix on page load and on button click
window.onload = drawMatrix;
document.addEventListener("click", drawMatrix);
</script>
</body>
</html>
```
在上面的示例中,我们首先定义了一个 10x10 的矩阵,然后使用 for 循环绘制每个单元格。每个单元格的颜色是随机生成的,取值范围为 1~10。每次单击页面,都会重新绘制矩阵,从而实现动画效果。