javascript - HTML Canvas 无法绘制图像

Question

我有这个 angularJS 应用程序，我正在从 Canvas 生成图像。我的其他一切都正常工作，我什至可以从 html 中的 SVG 绘制图像，但尝试从相对 URL 提取图像无法显示。我知道图像正在加载，并且由于一些控制台日志记录，它实际上已经找到了正确的图像。

这是我的选项对象:

// Define our options
self.options = {
    team: null,
    itemsPerRow: 3,
    targets: {
        containerId: 'totals',
        svgContainerClassName: 'total-item',
        svgClassName: 'svg-document',
        svgTitleClassName: 'total-title'
    },
    itemPadding: {
        top: 50,
        right: 50,
        bottom: 100,
        left: 50
    },
    canvasPadding: {
        top: 300,
        right: 100,
        bottom: 200,
        left: 100
    },
    sizes: {
        first: 1100,
        all: 300
    },
    footer: {
        logo: '/assets/images/k-logo-orange-black.png'
    }
};

您可以看到页脚 Logo 。显示的函数是这样的:

// Private function to draw the footer
var drawFooter = function (canvas, ctx) {

    var y = canvas.height - 50;

    // Draw our image
    var img = new Image();
    img.onload = function () {

        console.log(img.width);
        console.log(img.height);
        console.log(canvas.width - self.options.canvasPadding.right - img.width);
        console.log(y - img.height);

        ctx.drawImage(img, canvas.width - self.options.canvasPadding.right - img.width, y - img.height);
    };
    img.src = self.options.footer.logo;
};

因此，控制台日志正在输出图像的尺寸，并且 Canvas 位置完全在我的 Canvas 范围内，但图像没有显示。有谁知道为什么吗？

Answer 1

我认为这里发生了两件事。首先，如果您将此图像放置在 SVG 元素内，则在 Javascript 中，SVG 元素是使用不同的命名空间创建的，使用的命令如下(有一些异常(exception)):

var svg = document.createElementNS('http://www.w3.org/2000/svg','svg');
svg.setAttributeNS('http://www.w3.org/2000/svg','xlink','http://www.w3.org/1999/xlink');

参见 w3 文档 here

其次，我没有看到你在哪里给了 x 属性它的变量，这是必要的，可以在 MDN here 上找到。 ，(也引用 w3 文档 here )