Javascript 将SVG数学公式漂亮地显示到画布中_Javascript_Html_Canvas_Svg

Javascript 将SVG数学公式漂亮地显示到画布中

javascript html canvas svg

Javascript 将SVG数学公式漂亮地显示到画布中,javascript,html,canvas,svg,Javascript,Html,Canvas,Svg,从中，我想把一个数学方程（由Latex和tex2svg工具生成）放到画布中您可以在这里看到[此SVG公式][2]（填充颜色为黑色）现在，我将此SVG包含到画布中，如下所示： <body> <canvas id="textbox"></canvas> <script> // Draw SVG formula of absolute differential var textCanvas = document.getElementById('te

从中，我想把一个数学方程（由

Latex

和

tex2svg

工具生成）放到画布中

您可以在这里看到[此SVG公式][2]（填充颜色为黑色）

现在，我将此SVG包含到画布中，如下所示：

<body>
<canvas id="textbox"></canvas>
<script> 
// Draw SVG formula of absolute differential
var textCanvas = document.getElementById('textbox');
var contextTextBox = textCanvas.getContext('2d');
var img = new Image;
img.onload = function(){ contextTextBox.drawImage(img,0,0); };
img.src = "./formula.svg";
</script>
</body>


//绘制绝对微分方程
var textCanvas=document.getElementById（'textbox'）；
var contextTextBox=textCanvas.getContext（'2d'）；
var img=新图像；
img.onload=function（）{contextTextBox.drawImage（img，0,0）；}；
img.src=“./formula.svg”；

您可以在[此链接][3]上看到结果（SVG的填充颜色为白色）

问题是渲染不美观，公式紧凑且模糊

任何人都可以给我一些线索来提高方程渲染的质量（我不知道是否有可能达到与

MathJax

方程相同的质量）

感谢您的帮助

Math latex on canvas带亚像素渲染。您提供的图像不是您链接到的SVG图像，因此我不知道您为什么将图像拆分为3并进行压缩

无论如何，请参阅，以了解通过在（物理）子像素级别重新渲染图像来改进文本渲染（如Latex方程）的方法

请注意，图像必须具有非不透明的背景色

下面的代码段使用该答案中的核心函数对SVG图像执行相同的操作

我使用的是您提供的SVG图像，它是黑白相间的，但这种方法适用于除透明像素以外的所有颜色。如果您使用透明像素，您将必须访问自己的质量，因为它将取决于图像所绘制的背景

注意可能无法在过时的浏览器上运行

//SVG图像
var svg=`
`;
const backgroundcolor=“白色”；
//创建具有二维上下文的空白图像
var createImage=function（w，h）{var i=document.createElement（“canvas”）；i.width=w；i.height=h；i.ctx=i.getContext（“2d”）；返回i；}
//辅助函数
函数createInfoDiv（text）{var div=document.createElement（“div”）；div.textContent=text；return div；}
//创建画布并添加到dom
var canvas=createImage（350100）；
canvas.style.border=“1px红色实体”；
var ctx=canvas.ctx；
document.body.appendChild（画布）；
//如果像素是CSS像素大小的2倍，则为双画布分辨率。（可能是租用或视网膜显示）
如果（devicePixelRatio==2）{
var w=画布宽度；
var h=画布高度；
canvas.style.width=w+“px；”
canvas.style.height=h+“px；”
画布宽度=w*2；
canvas.height=h*2；
}
//此函数使用子像素渲染高质量图像。
//请注意，图像必须具有非不透明的背景色
//返回相同的imgData，第一个1/3包含新图像。
var subPixelBitmap=函数（imgData）{
var spR，spG，spB；//子像素
变量id，id1；//像素索引
var w=imgData.width；
var h=imgData.高度；
var d=imgData.data；
变量x，y；
var ww=w*4；
var ww4=ww+4；
对于（y=0；y