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

HTML5 Canvas将绘图另存为图像

1 个答案: