HTML5 Canvas+JQuery+Rails5.2无法绘制图形？求助排查

你现在的核心问题是把外层的<section id="canvas">容器当成了<canvas>元素本身，这直接导致后续的绘图代码全部失效，甚至把canvas都覆盖了。我来拆解一下你忽略的几个关键点：

1. 混淆了容器与目标元素 #

你的HTML里，<section id="canvas">只是一个包裹canvas的容器，真正能用来绘图的是它内部的<canvas>标签。你用$("#canvas")选中的是这个section，而section元素根本没有getContext()方法——这个方法是canvas元素独有的！所以代码执行到canvas.getContext('2d')时会直接报错，后面的代码也跟着停了，连你之前的文本输出都没机会执行。

而且，你调用canvas.html("<b>Hello world!</b>")时，是把section容器里的所有内容（包括里面的canvas标签）全部替换成了文本，这相当于直接把canvas元素从页面上删掉了，自然没法绘图。

2. 还有个小语法错误 #

你的section样式里border: 1px solid,多了个逗号，应该改成border: 1px solid;，否则样式可能不会正常生效。

3. Canvas的宽高设置要注意 #

另外，canvas的宽高最好用自身的width和height属性设置，而不是仅靠CSS。如果只给CSS宽高，画布会被拉伸，导致绘制的图形变形。

修正后的完整代码 #

HTML部分（canvas_test.html.erb） #

<h1>HTML5 Canvas Playground</h1>
<!-- 把section的id改成canvas-container避免和canvas混淆，修正border语法 -->
<section id="canvas-container" style='border: 1px solid; width: 800px; height: 600px;'>
  <!-- 给canvas设置id，同时添加width/height属性 -->
  <canvas id="myCanvas" width="800" height="600">
    Your browser does not support Canvas. Please upgrade your browser to proceed...
  </canvas>
</section>

jQuery代码 #

$(document).on('turbolink:load', function() {
  // 选中真正的canvas元素，并且转成原生DOM对象（jQuery对象没有getContext方法）
  var canvas = $("#myCanvas")[0];
  var context = canvas.getContext('2d');
  
  // 绘制蓝色矩形
  context.fillStyle = 'blue';
  context.fillRect(250, 50, 100, 100);
  
  // 如果要显示文本，用Canvas的绘图API绘制（而不是替换DOM内容）
  context.font = '24px Arial';
  context.fillStyle = 'black';
  context.fillText('Hello world!', 250, 200);
});

关键修正点说明 #

• 用$("#myCanvas")[0]获取原生canvas元素：jQuery返回的是元素集合，必须取出单个原生DOM对象才能调用canvas的原生API。
• 不要用.html()操作canvas容器：这会覆盖掉canvas元素，如果你需要额外的文本，可以在section里加一个单独的div，或者直接用canvas的fillText方法把文本绘制在画布上。
• 给canvas设置自身的width/height属性：保证画布的像素比例正确，避免图形拉伸。

这样修改后，你就能正常绘制图形，同时也能显示文本啦！

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