在<canvas>上渲染MathJax输出
我搜索过这个主题,但无法找到直接答案,而且我也不擅长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>
我现在得到的输出是
同样,我确实理解为什么它不起作用,因为数学是在字符串内部,Mathjax无法看到它并处理它.但它必须是一个供canvas使用的字符串.我不能只写context.fillText($\sin(x)$, 50, 100);没有字符串引号,因为它不起作用.
这可能是一个相关的问题,但不确定.
<canvas>文本绘制操作是与DOM 操作分开的操作，因此 Mathjax 无法与画布文本渲染操作交互。
我不确定<canvas>目前是否存在 MathJax 的渲染器后端。至少通过检查当前 MathJax 演示的渲染选项似乎并非如此。因此，MathJax 只能在 DOM 上创建输出。
出于安全原因，浏览器不允许<canvas>直接渲染 DOM，尽管这在技术上是可行的。否则，人们可以通过渲染网站<iframe>然后将其渲染<iframe>到画布上来从您登录的网站（例如 Facebook）窃取内容。
| 归档时间： |
|
| 查看次数： |
1720 次 |
| 最近记录： |