HTML Canvas无法绘图求助：绘制方块无显示问题排查

嘿，我来帮你搞定这个画布空白的问题！你的代码里漏掉了两个关键步骤，这就是为什么看不到方块的原因：

• 没有设置Canvas的宽高属性
  你创建了Canvas元素，但没有显式设置它的width和height属性。虽然Canvas有默认的300x150尺寸，但如果你的container有特殊样式，可能会导致画布被拉伸或者内容显示异常。更稳妥的方式是直接给Canvas设置宽高：

  canvas.width = 200; // 可根据需求调整
  canvas.height = 200; // 可根据需求调整
  

• 没有执行实际的绘制操作
  你调用ctx.rect(0, 0, 50, 50)只是在Canvas上下文里定义了一个矩形路径，但并没有真正把它画出来。你需要调用fill()来填充矩形，或者stroke()来绘制边框（也可以两者都调用），比如：

  ctx.fill(); // 填充矩形
  // 若需要边框可追加：ctx.stroke();
  

另外还有个小优化：你创建Canvas后已经持有canvas变量，没必要再用document.getElementById("canvas")重新获取，直接用之前的变量就行。

修正后的完整代码示例 #

var canvas = document.createElement("canvas");
canvas.id = "canvas";
// 设置Canvas自身宽高
canvas.width = 200;
canvas.height = 200;
container.append(canvas);

var ctx = canvas.getContext("2d");
ctx.strokeStyle = "rgb(242, 144, 7, 1)";
ctx.fillStyle = "rgb(242, 144, 7, 1)";
ctx.rect(0, 0, 50, 50);
// 执行填充操作，让矩形显示出来
ctx.fill();

这样修改后，你就能看到橙色的方块啦！

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