在画布背景图像上插入绘制的形状答案

【问题标题】：Insert drawn shape over canvas background image在画布背景图像上插入绘制的形状
【发布时间】：2016-08-05 09:40:30
【问题描述】：

在一个 html 文档中，我有一个带有背景图像的画布，正在绘制一个形状并将其存储为一个对象，然后将其重新插入为画布的一个元素。就目前而言，将形状重新插入为画布元素的行为会将画布的一部分强加在背景上，以便形状被画布的颜色包围，而不是在画布背景上绘制。有没有办法避免这种情况，但仍然能够在我想要的位置插入图像？（我知道我可以将图像保存为 png，然后使其背景透明，但我想在 html 本身中进行。）我已经看到了一些与此相关的东西，但我没有找到直接解决。

小提琴：https://jsfiddle.net/ZLevine/h3mo50w8/4/

我使用来自https://msdn.microsoft.com/en-us/library/gg589516(v=vs.85).aspx 的示例代码来绘制形状。

小提琴中的代码：

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
    border:1px solid #d3d3d3;
    background-image: white;
    }
</style>
<head>
    <body onload="startGame()">

    <script>
    var ship = new Image();
    var myBackground;

    function startGame() {
        myBackground = new component(656, 541, "http://wallpapercave.com/wp/PU5vVEd.jpg", 0, 0, "background");
        myScore = new component("30px", "Consolas", "white", 280, 40, "text");
        myGameArea.start();
        makeShip();
    }

    var myGameArea = {
        canvas : document.createElement("canvas"),
        start : function() {
            this.canvas.width = 480;
            this.canvas.height = 540;
            this.context = this.canvas.getContext("2d");
            document.body.insertBefore(this.canvas, document.body.childNodes[0]);
            this.frameNo = 0;
            this.interval = setInterval(updateGameArea, 20);  
            },
        clear : function() {
            this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
        },
        stop : function() {
            clearInterval(this.interval);
        }
    }

    function makeShip() {
    ctx = myGameArea.context
            // Draw saucer bottom.
            ctx.beginPath();
            ctx.moveTo(28.4, 16.9);
            ctx.bezierCurveTo(28.4, 19.7, 22.9, 22.0, 16.0, 22.0);
            ctx.bezierCurveTo(9.1, 22.0, 3.6, 19.7, 3.6, 16.9);
            ctx.bezierCurveTo(3.6, 14.1, 9.1, 11.8, 16.0, 11.8);
            ctx.bezierCurveTo(22.9, 11.8, 28.4, 14.1, 28.4, 16.9);
            ctx.closePath();
            ctx.fillStyle = "rgb(222, 103, 0)";
            ctx.fill();

            // Draw saucer top.
            ctx.beginPath();
            ctx.moveTo(22.3, 12.0);
            ctx.bezierCurveTo(22.3, 13.3, 19.4, 14.3, 15.9, 14.3);
            ctx.bezierCurveTo(12.4, 14.3, 9.6, 13.3, 9.6, 12.0);
            ctx.bezierCurveTo(9.6, 10.8, 12.4, 9.7, 15.9, 9.7);
            ctx.bezierCurveTo(19.4, 9.7, 22.3, 10.8, 22.3, 12.0);
            ctx.closePath();
            ctx.fillStyle = "rgb(51, 190, 0)";
            ctx.fill();
            // Save ship data.
            ship = ctx.getImageData(0, 0, 30, 30);

          }

    function component(width, height, color, x, y, type) {
        this.type  = type;
        if (type == "image" || type == "background") {
        this.image = new Image();
        this.image.src = color;
      }
        this.width = width;
        this.height = height;
        this.speedX = 0;
        this.speedY = 0;    
        this.x = x;
        this.y = y;    
        this.update = function() {
            ctx = myGameArea.context;
            if (this.type == "text") {
          ctx.font = this.width + " " + this.height;
          ctx.fillStyle = color;
          ctx.fillText(this.text, this.x, this.y);
        } if (type == "image" || type == "background") {
          ctx.drawImage(this.image, 
            this.x, 
            this.y,
            this.width, this.height);
          if (type == "background") {
            ctx.drawImage(this.image, this.x,
            this.y - this.height,
            this.width, this.height);
          }
        }
        else {
            ctx.fillStyle = color;
            ctx.fillRect(this.x, this.y, this.width, this.height);
        }
    }
        this.newPos = function() {
            this.x += this.speedX;
            this.y += this.speedY; 
            if (this.type == "background") {
                if (this.y == (this.height)) {
                    this.y = 0;
                }
            }       
        }    
    }

    function updateGameArea() {
        myGameArea.clear();
        myBackground.speedY = 1;
        myBackground.newPos();    
        myBackground.update();
        myGameArea.frameNo += 1;
        ctx.putImageData(ship, 200, 200);
    }

    function everyinterval(n) {
        if ((myGameArea.frameNo / n) % 1 == 0) {return true;}
        return false;
    }


    </script>
    </div>
    </body>
</html>

【问题讨论】：

更新小提琴：jsfiddle.net/ZLevine/h3mo50w8/4，也会在帖子中添加代码

标签： javascript html canvas

【解决方案1】：

在内存中的第二个画布上绘制飞船：

var memCanvas=document.createElement('canvas');
... draw your ship on the second canvas

然后使用第二个画布在主画布上绘制你的船：

canvas.drawImage(memCanvas,x,y);

【讨论】：

【解决方案2】：

问题是使用putImageData() 将逐字绘制使用getImageData() 时存储为ImageData 的内容。由于船被透明像素包围，因此这些像素也会被复制到画布上，覆盖那里的内容。

正如 markE 在他的回答中提到的，在临时画布上绘图是一个更好的解决方案。您需要做的就是更改代码中的几个地方：

// Save ship data.
//ship = ctx.getImageData(0, 0, 30, 30);
ship = document.createElement("canvas");  // create canvas
ship.width = ship.height = 30;            // set size
var shipCtx = ship.getContext("2d");      // temp. context
shipCtx.drawImage(ctx.canvas, 0, 0);      // draw ship to canvas

那么当你想把它拉回来的时候：

function updateGameArea() {
    myGameArea.clear();
    myBackground.speedY = 1;
    myBackground.newPos();    
    myBackground.update();
    myGameArea.frameNo += 1;
    //ctx.putImageData(ship, 200, 200);
    ctx.drawImage(ship, 200, 200);        // draw ship from canvas
}

Updated fiddle

另一种方法是将形状直接绘制到画布上，但使用中间画布会带来性能优势。

【讨论】：