我可以将动画 SVG 渲染到 Canvas 吗？

Question

我想创建一个 SVG 动画，但将其渲染到 Canvas。我知道 CanVG，但我不确定它是否满足我的需求：在 Canvas div 中显示使用 javascript 动画的 SVG 元素，而不是“本机”SVG 窗口。当我查看 CanVG 示例代码时，它似乎指向一个 SVG 文件，而不是使用作为同一文件一部分的 SVG 代码，并由 javascript 实时操作。有什么帮助吗？

Answer 1

我前段时间也遇到过这个问题，并尝试了上面提到的所有可能性，不幸的是没有结果。经过一番研究，我找到了一种将 SVG 注入 Canvas 的方法，只需一点点痛苦和额外的工作就可以实现。因此，解决方案是定义 svg 元素，然后将其推送到数组，然后将该 SVG 渲染为图像。

这是一个简短的代码片段：

SVG部分：

var data = "data:image/svg+xml," +
    "<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'>" +
        "<foreignObject width='100%' height='100%'>" +
            "<div xmlns='http://www.w3.org/1999/xhtml' style='font: bold 160px Myriad Pro, Arial, Helvetica, Arial, sans-serif'>" +
                "<span style='color:rgb(32,124,202); opacity: 0.8; -webkit-text-stroke-color: white; -webkit-text-stroke-width: 2px'>" + letters[pos] + "</span>" +
             "</div>" +
            "</foreignObject>" +
    "</svg>";
characters.push(data);

和JS部分：

var letters = [...] // a pool of characters 
var images = new Array(letters.length);

for (var i=0; i< letters.length; i++) {
    var textPosition = WIDTH/2 - (letters.length * CHAR_DISTANCE)/2;
    var txt = new Text(letters[i], textPosition + (i*CHAR_DISTANCE), HEIGHT/2,
    (Math.random() * 3) + 5 , (-Math.random() * 10) + 5);
    images[i] = new Image();
    images[i].src = characters[i];
    textArray.push(txt);
}

您可以在这里查看整个源代码：https ://esimov.com/experiments/javascript/404/