实现 MathJax：使用 JSFiddle、Canvas 和 DOM

问题描述

我正在查看代码 here。在 html 文件中运行 MathJax API 时，我能够正确呈现 MathJax 部分。但是，我无法在画布中获取 MathJax 文本（它出现在其上方一行）。我想知道我做错了什么。我觉得我需要运行另一个扩展，API，才能让它工作。任何帮助将不胜感激！

<html>
<style>
#gameCanvas {
  background-color: lightblue;
}
</style>
<div class="canvasHolder">
  <div id="latexContent">\(\frac{3}{7}\)</div>
  <canvas id="gameCanvas" width="600" height="600">Not supported</canvas>
</div>
<script>
var stage = new createjs.Stage("gameCanvas");
var domElement = new createjs.DOMElement(document.getElementById("latexContent"));
stage.addChild(domElement);
</script>
</html>

解决方法

您需要添加 createjs 库和 mathjax 库（请参阅 <html> 之后的前两行）

<html>
<script type="text/javascript" src="//code.createjs.com/createjs-2013.09.25.combined.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<style>
#gameCanvas {
  background-color: lightblue;
}
</style>
<div class="canvasHolder">
  <div id="latexContent">\(\frac{3}{7}\)</div>
  <canvas id="gameCanvas" width="600" height="600">Not supported</canvas>
</div>
<script>
var stage = new createjs.Stage("gameCanvas");
var domElement = new createjs.DOMElement(document.getElementById("latexContent"));
stage.addChild(domElement);
</script>
</html>

dom javascript jsfiddle mathjax

实现 MathJax：使用 JSFiddle、Canvas 和 DOM

问题描述

解决方法

相关问答