javascript - 如何显示用 JavaScript 创建的 Canvas ？

Question

我想根据简单的 jQuery post 请求动态显示图像。但是，post 请求很好用，但是 Canvas 无论如何都显示不出来。

我试过这样的:

$.ajax({type: 'POST',
    url: 'http://....'}).done(function (data) {
        // data is beeing recieved correctly, it is not empty
        var imageBase64 = 'data:image/png;base64,' + data;
        var canvas = document.createElement("canvas"),
            ctx2d = canvas.getContext("2d"),
            size = 64, c = size / 2 - 0.5,
            innerRadius = 5,
            outerRadius = 20;

        canvas.width = size;
        canvas.height = size;
        var image = new Image();
        image.src = imageBase64;
        ctx2d.drawImage(image, 0, 0);      
    });
});

我错过了什么吗？如何显示新创建的 Canvas ？

Answer 1

您的代码似乎是正确的，但您只是错过了将创建的文档元素 canvas 附加到任何 DOM 元素上。请试试这个:

$.ajax({type: 'POST',
    url: 'http://....'}).done(function (data) {
        var imageBase64 = 'data:image/png;base64,' + data;
        var canvas = document.createElement("canvas"),
            ctx2d = canvas.getContext("2d"),
            size = 64, c = size / 2 - 0.5,
            innerRadius = 5,
            outerRadius = 20;

        canvas.width = size;
        canvas.height = size;
        var image = new Image();
        image.src = imageBase64;
        ctx2d.drawImage(image, 0, 0); 
        // Append your created canvas for example to the body of your DOM
        document.querySelector('body').appendChild(canvas);       
    });
});