如何绘制具有画布渐变的矩阵？

绘制具有画布渐变的矩阵

基础概念

画布渐变矩阵是指在HTML5 Canvas上绘制一个矩阵(通常是矩形网格)，并使用渐变效果填充这些矩阵元素。这种技术常用于数据可视化、热力图、游戏开发等领域。

实现方法

1. 使用HTML5 Canvas API

<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>

2. 使用WebGL实现更复杂的渐变矩阵

// 顶点着色器
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);

渐变类型

线性渐变：沿直线方向颜色变化
线性渐变：沿直线方向颜色变化
径向渐变：从中心点向外辐射的颜色变化
径向渐变：从中心点向外辐射的颜色变化
圆锥渐变：围绕中心点旋转的颜色变化(较新浏览器支持)
圆锥渐变：围绕中心点旋转的颜色变化(较新浏览器支持)

应用场景

数据可视化：热力图、矩阵图
游戏开发：地图、背景效果
UI设计：按钮、卡片等元素的渐变效果
艺术创作：生成艺术、抽象图案

常见问题及解决方案

问题1：渐变显示不连续或有明显边界

原因：颜色停止点(color stops)设置不当或渐变范围与绘制范围不匹配

解决方案：

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