HTML5 Canvas将图形另存为图像

Question

我对将png保存到画布有疑问。 它为我节省了图片，但为我节省了所画的东西。 当我加载不再可见的背景时。

var dataURL = this.canva.toDataURL();
document.getElementById(id).src = dataURL;

我写的背景图片

 function leapController()
        {
            var tracks = new Array();
            tracks[0] = {link: 'png/1.png'};
            tracks[1] = {link: 'png/2.png'};
            tracks[2] = {link: 'png/3.png'};
            tracks[3] = {link: 'png/4.png'};
            tracks[4] = {link: 'png/5.png'};

我想将我的整个图像以及背景和绘画元素一起注册

Answer 1

您可以在问题中提供一些宝贵的代码，但是其想法是，当您准备保存画布时，可以使用“合成” 在现有像素后面绘制背景图像。

为了让您入门...这是一些应用该想法的代码：

function save(desiredBackgroundIndex){

    // set context compositing to draw behind existing pixels
    context.globalCompositeOperation='destination-over';

    // Draw the desired background on the canvas BEHIND existing pixels
    // Assumes tracks[] is in scope
    context.drawImage(tracks[desiredBackgroundIndex],0,0);

    // always clean up! Change compositing mode back to default
    context.globalCompositeOperation='source-over';

    // set #id's src to the canvas's data url
    document.getElementById(id).src = this.canva.toDataURL();

}

// USAGE example: add png/3.png to the canvas and save the canvas's data url to #id
save(2);