<canvas id="myCanvas" width="500" height="500"></canvas>

<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  
  // 定义矩阵参数
  const rows = 10;
  const cols = 10;
  const cellSize = 40;
  const padding = 5;
  
  // 创建渐变矩阵
  for (let i = 0; i < rows; i++) {
    for (let j = 0; j < cols; j++) {
      // 计算单元格位置
      const x = j * (cellSize + padding);
      const y = i * (cellSize + padding);
      
      // 创建渐变
      const gradient = ctx.createLinearGradient(x, y, x + cellSize, y + cellSize);
      const hue = (i * j) / (rows * cols) * 360; // 基于位置计算色相
      gradient.addColorStop(0, `hsl(${hue}, 100%, 50%)`);
      gradient.addColorStop(1, `hsl(${hue}, 100%, 20%)`);
      
      // 绘制矩形并填充渐变
      ctx.fillStyle = gradient;
      ctx.fillRect(x, y, cellSize, cellSize);
    }
  }
</script>

// 顶点着色器
const vertexShaderSource = `
  attribute vec2 a_position;
  void main() {
    gl_Position = vec4(a_position, 0, 1);
  }
`;

// 片段着色器
const fragmentShaderSource = `
  precision mediump float;
  uniform vec2 u_resolution;
  void main() {
    vec2 st = gl_FragCoord.xy/u_resolution;
    vec3 color = vec3(st.x, st.y, abs(sin(st.x + st.y)));
    gl_FragColor = vec4(color, 1.0);
  }
`;

// 初始化WebGL
const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');

// 编译着色器
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

// 创建着色程序
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);

// 设置分辨率
const resolutionUniformLocation = gl.getUniformLocation(program, "u_resolution");
gl.uniform2f(resolutionUniformLocation, canvas.width, canvas.height);

// 绘制全屏矩形
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
  -1.0, -1.0,
  1.0, -1.0,
  -1.0, 1.0,
  -1.0, 1.0,
  1.0, -1.0,
  1.0, 1.0
]), gl.STATIC_DRAW);

const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

// 绘制
gl.drawArrays(gl.TRIANGLES, 0, 6);

// 确保渐变范围覆盖整个绘制区域
const gradient = ctx.createLinearGradient(0, 0, width, height);
gradient.addColorStop(0, 'red');
gradient.addColorStop(0.5, 'yellow');
gradient.addColorStop(1, 'green');