Question

我搜索了这个主题，但无法找到直接答案，而且我也不擅长javascript。所以我希望有人能告诉我如何做到这一点。

我只想在canvas2D中显示数学。我使用context.fillText将字符串传递给canvas2d，但Mathjax显然没有处理该字符串，因为它不在页面本身上。

这是一个MWE。我需要修改这个以使数学显示在画布上？

<!DOCTYPE html>

<html>
<head>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: { inlineMath: [['$','$'],['\\(','\\)']] }});
</script>

<script type="text/javascript" 
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>        
</head>    
<body>

</p>Trying to render $\sin(x)$ inside canvas 2D as text</p>

<div>
<canvas id="e" width="200" height="200"></canvas>
<script>
  var canvas = document.getElementById("e");
  var context = canvas.getContext("2d");
  context.font = "normal 16px Arial";
  context.fillText("test string", 50, 50);
  context.fillText("$\sin(x)$", 50, 100);
</script>
</div>    
</body>
</html>

我现在得到的输出是

Mathematica graphics

同样，我确实理解为什么它不起作用，因为数学是在字符串中，Mathjax无法看到并处理它。但它必须是一个供canvas使用的字符串。我不能在没有字符串引号的情况下编写context.fillText($\sin(x)$, 50, 100);，因为它不起作用。

这可能是一个相关的问题，但不确定。

How do I format html with MathJax after loading it using jQuery.load?

Answer 1

<canvas>文本绘制操作是DOM manipulation的单独操作，因此Mathjax无法与画布文本渲染操作交互。

我不确定当前是否存在MathJax的<canvas>渲染器后端。至少通过检查当前MathJax演示的渲染选项似乎并非如此。因此，MathJax只能在DOM上创建输出。

出于安全原因，浏览器不允许直接在<canvas>上呈现DOM，尽管这在技术上是可行的。否则，可以通过在<iframe>中呈现网站然后在画布上呈现此<iframe>来窃取您登录的网站（例如Facebook）中的内容。

Answer 2

我一直试图找出同样的事情。我确实将MathJax放到了canvas元素上，但还没有弄清楚如何在上面描述的上下文中使用MathJax。但是，如果这有助于你，那么你去吧。

$(function () {
    function drawCanvas(){
      $math = $(".MathJax_Display")
      html2canvas($math, {
        onrendered: function (canvas) {
            document.body.appendChild(canvas);
        },
      }); 
    }
    MathJax.Hub.Queue(drawCanvas);
})

http://jsfiddle.net/masterthornton/umnc40d6/7/

Answer 3

我鼓励您退房：https://github.com/CurriculumAssociates/canvas-latex

它允许您在流行的画布库（如PixiJS / CreateJS）中渲染乳胶。它还提供了一些强大的api方法来拆分乳胶，添加宏等。

在<canvas> </canvas>上渲染MathJax输出

3 个答案: