基于DOM开发：用If-Else语句为Canvas图形选择颜色的问题

解决根据Canvas ID分配不同颜色绘制图形的问题 #

嘿，我懂你刚接触DOM操作Canvas的那种懵懵的感觉——单一颜色能正常跑，一要根据ID区分颜色就卡壳是吧？其实这个需求的实现逻辑很清晰，咱们一步一步来搞定它。

核心思路 #

1. 通过document.getElementById()获取指定ID的Canvas元素
2. 获取该Canvas的2D绘图上下文（这是绘制图形的关键入口）
3. 根据Canvas的ID，用条件判断（if-else）设置对应的填充/描边颜色
4. 调用绘图API绘制图形

完整代码示例 #

先看HTML部分，咱们准备两个不同ID的Canvas：

<canvas id="redCanvas" width="200" height="150" style="border:1px solid #ccc;"></canvas>
<canvas id="blueCanvas" width="200" height="150" style="border:1px solid #ccc;"></canvas>

然后是JavaScript的drawShape函数实现：

function drawShape(canvasID) {
  // 1. 获取目标Canvas元素，先做存在性检查避免报错
  const canvas = document.getElementById(canvasID);
  if (!canvas) {
    console.error(`找不到ID为${canvasID}的Canvas元素`);
    return;
  }

  // 2. 获取2D绘图上下文
  const ctx = canvas.getContext('2d');
  if (!ctx) {
    console.error('无法获取Canvas绘图上下文');
    return;
  }

  // 3. 根据Canvas ID设置对应颜色
  let shapeColor;
  if (canvasID === 'redCanvas') {
    shapeColor = 'red';
  } else if (canvasID === 'blueCanvas') {
    shapeColor = 'blue';
  } else {
    // 给个默认颜色，防止传入未知ID时程序异常
    shapeColor = 'gray';
  }

  // 4. 绘制矩形（你也可以换成其他图形，比如圆形、路径）
  ctx.fillStyle = shapeColor;
  ctx.fillRect(20, 20, 160, 110);
}

// 调用函数绘制两个不同颜色的矩形
drawShape('redCanvas');
drawShape('blueCanvas');

关键细节说明 #

• 严格相等判断：用===来匹配ID字符串，避免隐式类型转换带来的意外问题
• 容错处理：先检查Canvas元素和绘图上下文是否存在，防止因为ID拼写错误、浏览器不支持Canvas等情况导致代码崩溃
• 默认值兜底：else分支设置默认颜色，保证即使传入未定义的ID，程序也能正常输出

进阶优化（可选） #

如果后续要支持更多颜色的Canvas，用if-else会越来越繁琐，推荐用对象映射来简化代码：

function drawShape(canvasID) {
  const canvas = document.getElementById(canvasID);
  if (!canvas) return;

  const ctx = canvas.getContext('2d');
  if (!ctx) return;

  // 用对象存储ID和颜色的对应关系，后续新增只需加键值对
  const colorMap = {
    redCanvas: 'red',
    blueCanvas: 'blue',
    greenCanvas: 'forestgreen',
    yellowCanvas: 'gold'
  };
  // 从映射中取颜色，不存在则用默认灰色
  const shapeColor = colorMap[canvasID] || 'gray';

  ctx.fillStyle = shapeColor;
  ctx.fillRect(20, 20, 160, 110);
}

内容的提问来源于stack exchange，提问作者kantor9991