在 <canvas>

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 无法看到它并处理它。但它必须是供画布使用的字符串。我不能只写

context.fillText($\sin(x)$, 50, 100);

而不使用字符串引号，因为它不起作用。

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

使用 jQuery.load 加载 html 后如何使用 MathJax 格式化 html？

Answer 1

<canvas>

文本绘制操作是与 DOM 操作分开的操作，因此 Mathjax 无法与画布文本渲染操作交互。

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

出于安全原因，浏览器不允许直接在

<canvas>

上渲染 DOM，尽管这在技术上是可行的。否则，人们可以通过在

<canvas>

中渲染网站，然后在画布上渲染此

<iframe>

，从您登录的网站（例如 Facebook）窃取内容。

Answer 2

<iframe>

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

Answer 3

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

->

LATEX

->

SVG

->

base64

。

使用

cavans

将latex转换为svg元素，然后将其转为base64格式，最后将base64放入cavans中作为图像。

这是我的代码：

MathJax.tex2svg("F=ma")

var tex = oriData.nodes[i].latex;
var svg = MathJax.tex2svg(tex);
var svg = svg.childNodes[0]
var ssvg = new XMLSerializer().serializeToString(svg);
var base64 = "data:image/svg+xml;base64, " + window.btoa(unescape(encodeURIComponent(ssvg)));

是base64格式方程SVG数据。

Answer 4

https://github.com/CurriculumAssociates/canvas-latex

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

Answer 5

base64

添加：

<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"> </script>

复制粘贴到脚本标签中

var svg = MathJax.tex2svg("a \ne 0");

从输入中获得动态数学方程：

MathJax = { { load : [ 'output/svg' ] }

运行良好！

在 <canvas>

问题描述投票：0回答：5

5个回答

最新问题

在 <canvas>

问题描述 投票：0回答：5

5个回答

最新问题

问题描述投票：0回答：5