如何显示用 JavaScript 创建的画布？答案

【问题标题】：How to display a canvas created with JavaScript?如何显示用 JavaScript 创建的画布？
【发布时间】：2018-02-27 12:21:40
【问题描述】：

我想根据一个简单的 jQuery 发布请求动态显示图像。但是，post 请求运行良好，但画布无论如何都没有显示。

我试过这样：

$.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 附加到任何地方。

标签： javascript jquery ajax html canvas

【解决方案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);       
    });
});

【讨论】：