Question

我想动态创建一个画布并将其附加到特定的DIV并在画布上绘制一个内联svg。但是没有按预期工作。

var randn = '1';

    function createme(){
        alert("completed 0");
          var crCavs = $('<canvas />',{ id : 'mycanvs'+randn })

          $('#album').append(crCavs);
        alert("completed 1");

          var svg2 =document.getElementById('sVgsource'+randn).outerHTML,
              vms =document.getElementById('mycanvs'+randn), // target canvas
              ctx2 =vms.getContext('2d');

          //callback
          svgToImage(svg2, function(img2){
            vms.width =$('#sVgsource'+randn).width();
            vms.height =$('#sVgsource'+randn).height();
            alert("completed 3");
            ctx2.drawImage(img2, 30, 40);
              alert("completed 4");
          }

          function svgToImage(svg2, callback) {
            var nurl = "data:image/svg+xml;utf8," + encodeURIComponent(svg2),
                img2 = new Image;
            //invoke callback
              callback(img2);

              img2.src = nurl;
              alert("completed 2");
          }
    }
    createme();

Answer 1

您缺少svgToImage()函数的结束括号：

svgToImage(svg2, function(img2) {
    vms.width = img2.width;
    vms.height = img2.height;
    alert("completed 3");
    ctx2.drawImage(img2, 0, 0);
      alert("completed 4");
}); // <-- here

还有一些其他问题：

只需重复使用canvas元素：

var canvCrtrWrp = $('<canvas />',{ id : 'mycanvs'+randn })

...
var vms = canvCrtrWrp[0];  // index 0 is the actual canvas element

您还可以使用画布上制作的图像的宽度：

svgToImage(svg2, function(img2) {
    vms.width = img2.width;
    vms.height = img2.height;
    ...

请记住对图像使用onload处理程序（它已从原始代码中删除）。如果没有任何实际图像数据传回图像元素（需要一些时间来加载，解码等）：

 function svgToImage(svg2, callback) {
     var nurl = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svg2),
         img2 = new Image;

     img2.onload = function() {
        callback(this);
     }
     ...

等

更新了 fiddle 。

在动态创建的画布上绘制DrawImage

1 个答案: