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);