Canvas 在<；上呈现MathJax输出；帆布>；_Canvas_Mathjax

Canvas 在<；上呈现MathJax输出；帆布>；

canvas

Canvas 在<；上呈现MathJax输出；帆布>；,canvas,mathjax,Canvas,Mathjax,我已经搜索了这个主题，但找不到直接的答案，我也不擅长javascript。所以我希望有人能告诉我怎么做我只是喜欢在画布2D中显示数学。我使用context.fillText将字符串传递给canvas2d，但该字符串显然没有被Mathjax处理，因为它不在页面上这是一个MWE。我需要修改什么才能使数学显示在画布上 <!DOCTYPE html> <html> <head> <script type="text/x-mathjax-config">

我已经搜索了这个主题，但找不到直接的答案，我也不擅长javascript。所以我希望有人能告诉我怎么做

我只是喜欢在画布2D中显示数学。我使用

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>


MathJax.Hub.Config（{tex2jax:{inlineMath:[['$'，'$']，['\\（'，'\\）']}）；
尝试在画布2D内将$\sin（x）$呈现为文本
var canvas=document.getElementById（“e”）；
var context=canvas.getContext（“2d”）；
context.font=“正常16px Arial”；
填充文本（“测试字符串”，50,50）；
context.fillText（“$\sin（x）$”，50，100）；

我现在得到的输出是

同样，我也理解为什么它不起作用，因为数学在字符串中，Mathjax无法看到它并处理它。但它必须是一个字符串，以便画布使用。我不能只写

context.fillText（$\sin（x）$，50100）不带字符串引号，因为它将不起作用
这可能是一个相关的问题，但不确定
文本绘制操作是独立于的操作，因此Mathjax无法与画布文本呈现操作交互
我不确定当前是否存在MathJax的
渲染器后端。至少，通过检查当前MathJax演示中的渲染选项，情况似乎并非如此。因此，MathJax只能在DOM上创建输出
由于安全原因，浏览器不允许直接在
上呈现DOM，尽管这在技术上是可行的。否则，您可能会通过在
中呈现站点，然后在画布上呈现该
来窃取您登录的站点（如Facebook）的内容。
我一直在尝试解决同样的问题。我确实在canvas元素上使用了MathJax，但还没有弄清楚如何在上面描述的上下文中使用MathJax。但如果这对你有帮助的话，你就去吧
$(function () {
    function drawCanvas(){
      $math = $(".MathJax_Display")
      html2canvas($math, {
        onrendered: function (canvas) {
            document.body.appendChild(canvas);
        },
      }); 
    }
    MathJax.Hub.Queue(drawCanvas);
})

我鼓励您退房：
它允许您在流行的画布库（如PixiJS/CreateJS）中渲染latex。它还提供了一些强大的api方法来拆分latex、添加宏等。
您研究过了吗？MathJax可以生成SVG输出，这将是一个自然的候选。但正如@Mikko Ohtamaa所指出的，MathJax目前还没有画布输出。请注意：cdn.MathJax.org的生命即将结束，请查看迁移提示（也许还可以为未来读者更新您的帖子）。此外，请查看答案。正如其他评论指出的，您应该能够在`上呈现SVG输出的图像。JSFIDLE不存在：(