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

Insert drawn shape over canvas background image

本文关键字：插入 绘制 图像 布背景 背景      更新时间：2024-06-10

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

Fiddle：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>

问题是，使用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
}

更新的小提琴

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

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

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

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

canvas.drawImage(memCanvas,x,y);
相关文章：