HTML Canvas无法绘制图形？Canvas新手求助解决方案

你的代码里有两个关键错误，导致无法在Canvas上绘制内容：

1. 选择器语法错误 #

获取Canvas元素时，document.querySelector("myCanvas")缺少ID选择器的前缀#。querySelector识别ID需要用#开头，直接写字符串会被当作标签名，而不存在<myCanvas>标签，所以根本获取不到目标元素。

正确写法应该是：

document.querySelector("#myCanvas")

2. 脚本执行时机错误 #

你的JS代码放在<head>中，浏览器解析到这部分代码时，<body>里的Canvas元素还没被渲染出来，此时执行let cx = ...会得到null，调用getContext自然会失败。哪怕后面有window.onload回调，cx变量已经提前被赋值为错误值了。

修复后的完整JavaScript代码 #

把获取Canvas和上下文的逻辑放到window.onload回调里，确保DOM完全加载后再执行：

window.onload = function drawOnCanvas() {
  let cx = document.querySelector("#myCanvas").getContext("2d");
  cx.beginPath();
  cx.moveTo(50, 10);
  cx.lineTo(10, 70);
  cx.lineTo(90, 70);
  cx.fill();
};

额外建议：给Canvas设置宽高 #

默认Canvas的宽高是300px×150px，建议直接通过Canvas元素的width和height属性设置尺寸，不要用CSS设置（会拉伸画布内容）：

<canvas id="myCanvas" class="center" width="200" height="100"></canvas>

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