Javascript 画布中SVG路径渲染的性能改进
Tl；DR：使用下面的代码，我的渲染时间出奇地慢——任何关于这可能的想法或关于如何提高性能的建议都将不胜感激 我正在开发一个需要支持多个渲染后端的应用程序（例如，Javascript 画布中SVG路径渲染的性能改进,javascript,performance,canvas,svg,Javascript,Performance,Canvas,Svg,Tl；DR：使用下面的代码，我的渲染时间出奇地慢——任何关于这可能的想法或关于如何提高性能的建议都将不胜感激 我正在开发一个需要支持多个渲染后端的应用程序（例如，SVG和Canvas），但我遇到了一些在渲染到Canvas时意想不到的半严重性能问题 好的，我的代码已经构建好了，这样每个后端都实现了一个类似画布的绘图API，这样无论使用什么后端，呈现语法都保持不变。我的代码正在呈现定义为SVG路径的“字形”（最初来自SVG字体文件）。问题在于，画布渲染速度惊人地慢——几乎与具有大量DOM交互的SVG
SVGCanvasGlyph[['M', 201, 203.5551],['s', 15.2, 13.254, 15.3, 18.5, 22.3, 50.118], ...]
canvasrendingcontext2d#renderGlyphglyph.pathcanvas.renderGlyph = function canvasRenderGlyph(name, x, y, nocache) {
if (!(name instanceof Glyph) && !font.glyphs[name]) {
return console.log('Unsupported Glyph: ' + name, 'warn');
}
x = x * scale;
y = y * scale;
var glyph, path, c, startx, starty, px, py, controlpx, controlpy;
if (typeof name === 'string' && name in glyphCache && !nocache) {
glyph = glyphCache[name];
} else {
glyph = (name instanceof Glyph) ? name : new Glyph(font.glyphs[name]);
glyph.scale(scale * font.scale.x, scale * font.scale.y);
if (typeof name === 'string') {
glyphCache[name] = glyph;
}
}
path = glyph.path;
startx = x;
starty = y;
px = 0;
py = 0;
this.beginPath();
for (var i = 0, length = path.length; i < length; i++) {
c = path[i];
switch (c[0]) {
case 'M':
px = c[1];
py = c[2];
this.moveTo(startx + px, starty + py);
break;
case 'l':
px += c[1];
py += c[2];
this.lineTo(startx + px, starty + py);
break;
case 'h':
px += c[1];
this.lineTo(startx + px, starty + py);
break;
case 'v':
py += c[1];
this.lineTo(startx + px, starty + py);
break;
case 'q':
controlpx = px + c[1];
controlpy = py + c[2];
px += c[3];
py += c[4];
this.quadraticCurveTo(
startx + controlpx, starty + controlpy, startx + px, starty + py);
break;
case 't':
controlpx = px + (px - controlpx);
controlpy = py + (py - controlpy);
px += c[1];
py += c[2];
this.quadraticCurveTo(
startx + controlpx, starty + controlpy, startx + px, starty + py);
break;
case 'c':
controlpx = px + c[3];
controlpy = py + c[4];
this.bezierCurveTo(
startx + px + c[1], starty + py + c[2], startx + controlpx, starty + controlpy, startx + px + c[5], starty + py + c[6]);
px += c[5];
py += c[6];
break;
case 's':
this.bezierCurveTo(
startx + controlpx, starty + controlpy, startx + px + c[1], starty + py + c[2], startx + px + c[3], starty + py + c[4]);
px += c[3];
py += c[4];
controlpx = px + c[1];
controlpy = py + c[2];
break;
case 'z':
this.closePath();
break;
default:
if (c[0].match(/[a-z]/i)) {
console.log('Unsupported path command: ' + cname, name, 'warn');
}
break;
}
}
this.fillStyle = self.settings.fillcolor;
this.fill();
};
canvas.renderGlyph=函数canvasrrenderglyph（名称，x，y，nocache）{
if（！（Glyph的名称实例）和&！font.glyphs[名称]）{
返回console.log（'Unsupported Glyph:'+name，'warn'）；
}
x=x*刻度；
y=y*刻度；
变量图示符，路径，c，startx，starty，px，py，controlpx，controlpy；
if（glyphCache&&！nocache中的typeof name==='string'&&name）{
glyph=glyphCache[name]；
}否则{
glyph=（glyph的名称实例）？名称：新glyph（font.glyphs[name]）；
glyph.scale（scale*font.scale.x，scale*font.scale.y）；
如果（名称的类型=='string'）{
glyphCache[名称]=字形；
}
}
路径=glyph.path；
startx=x；
starty=y；
px=0；
py=0；
this.beginPath（）；
对于（变量i=0，长度=path.length；i其他可能会影响性能的因素-画布大小、页面上可能存在其他元素、动画循环等。另外，您认为哪个硬件/平台的性能较差？如果您直接使用svgfont或truetype webfont，性能如何？和你的js实现相比，我很好奇。我还没试过。不过，我尝试过使用
ctx.drawImage