我的代码为何无法在Canvas上实现颜色效果？附JS及HTML代码

嘿，我来帮你梳理下Canvas颜色效果不生效的常见问题，这些都是新手常踩的坑：

• 忘记先设置样式再绘制
  很多同学会犯顺序错误：先调用绘制方法（比如fillRect()、stroke()），再设置fillStyle或strokeStyle。Canvas是按代码顺序执行的，后设置的样式不会回溯应用到之前的绘制操作上。举个例子：

  // ❌ 错误：先绘制再设样式
  ctx.fillRect(10, 10, 50, 50);
  ctx.fillStyle = "red";
  // ✅ 正确：先设样式再绘制
  ctx.fillStyle = "red";
  ctx.fillRect(10, 10, 50, 50);
  

• 混淆Canvas原生尺寸和CSS尺寸
  如果你只通过CSS给Canvas设置宽高，却没设置Canvas元素的width和height属性，会导致画布被拉伸变形，甚至绘制的内容“消失”在可视区域外。正确的做法是同时设置原生属性和CSS（如果需要适配页面布局）：

  <!-- ❌ 错误：仅用CSS定义尺寸 -->
  <canvas style="width: 500px; height: 500px;"></canvas>
  <!-- ✅ 正确：同时设置原生属性和CSS -->
  <canvas width="500" height="500" style="width: 500px; height: 500px;"></canvas>
  

• 在DOM加载完成前执行绘制代码
  如果你的JS代码直接放在<head>标签里，没有等待DOM加载完成，那获取到的Canvas元素可能是null，上下文也无法初始化，自然画不出任何内容。解决方法是监听DOMContentLoaded事件：

  // ✅ 等待DOM加载完成后再操作Canvas
  document.addEventListener("DOMContentLoaded", function() {
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");
    // 在这里执行所有绘制逻辑
  });
  

• 使用了不合法的颜色值
  如果你输入的颜色值格式错误，Canvas会忽略这个设置，转而使用默认样式（可能和你预期的不一样）。比如拼写错误的颜色名、超出范围的RGB值：

  // ❌ 错误示例
  ctx.fillStyle = "reed"; // 应为"red"
  ctx.fillStyle = "rgb(256, 0, 0)"; // RGB值范围是0-255
  // ✅ 合法颜色值示例
  ctx.fillStyle = "#ff0000";
  ctx.fillStyle = "rgb(255, 0, 0)";
  ctx.fillStyle = "hsl(0, 100%, 50%)";
  ctx.fillStyle = "red";
  

• 绘制内容超出Canvas可视区域
  比如你绘制的图形坐标是(600, 600)，但Canvas的原生宽高只有500px，那图形就会被移出画布，自然看不到颜色效果。可以检查下你的绘制坐标和尺寸是否在Canvas范围内。

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