实施 MathJax：使用 JSFiddle、Canvas 和 DOM

Question

我正在查看代码 here。当运行在 html 文件中使用 MathJax API 时，我能够使 MathJax 部分正确呈现。但是，我无法在 canvas 中获取 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>

Answer 1

您需要添加 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>

实施 MathJax：使用 JSFiddle、Canvas 和 DOM

Implementing MathJax: Using JSFiddle, Canvas, and DOM

javascript

dom

jsfiddle

mathjax