Javascript 在画布背景图像上插入绘制的形状
在html文档中，我有一个带有背景图像的画布，正在绘制一个形状并将其存储为对象，然后将其作为画布的一个元素重新插入。现在，作为画布元素重新插入形状的行为将画布的一部分置于背景之上，因此形状被画布的颜色包围，而不是在画布背景之上绘制。有没有办法避免这种情况，但仍然能够插入图像的地方，我想？（我知道我可以将图像保存为png，然后使其背景透明，但我希望在html中这样做。）我看到了一些与此相关的东西，但我发现没有一个能直接解决它 小提琴： 我使用来自的示例代码来绘制形状 小提琴中的代码：Javascript 在画布背景图像上插入绘制的形状,javascript,html,canvas,Javascript,Html,Canvas,在html文档中，我有一个带有背景图像的画布，正在绘制一个形状并将其存储为对象，然后将其作为画布的一个元素重新插入。现在，作为画布元素重新插入形状的行为将画布的一部分置于背景之上，因此形状被画布的颜色包围，而不是在画布背景之上绘制。有没有办法避免这种情况，但仍然能够插入图像的地方，我想？（我知道我可以将图像保存为png，然后使其背景透明，但我希望在html中这样做。）我看到了一些与此相关的东西，但我发现没有一个能直接解决它 小提琴： 我使用来自的示例代码来绘制形状 小提琴中的代码： <ht
<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>
帆布{
边框：1px实心#D3；
背景图像：白色；
}
var ship=新图像（）；
我的背景；
函数startName（）{
myBackground=新组件（65656541，“http://wallpapercave.com/wp/PU5vVEd.jpg，0，0，“背景”）；
myScore=新组件（“30px”、“控制台”、“白色”、280、40、“文本”）；
myGameArea.start（）；
makeShip（）；
}
var myGameArea={
画布：document.createElement（“画布”），
开始：函数（）{
this.canvas.width=480；
this.canvas.height=540；
this.context=this.canvas.getContext（“2d”）；
document.body.insertBefore（this.canvas，document.body.childNodes[0]）；
这个.frameNo=0；
this.interval=setInterval（updateGameArea，20）；
},
清除：函数（）{
this.context.clearRect（0，0，this.canvas.width，this.canvas.height）；
},
停止：函数（）{
clearInterval（这个.interval）；
}
}
函数makeShip（）{
ctx=myGameArea.context
//画碟底。
ctx.beginPath（）；
ctx.moveTo（28.4,16.9）；
比塞尔曲线图（28.4,19.7,22.9,22.0,16.0,22.0）；
比塞尔曲线图（9.1,22.0,3.6,19.7,3.6,16.9）；
比塞尔曲线图（3.6,14.1,9.1,11.8,16.0,11.8）；
比塞尔曲线图（22.9,11.8,28.4,14.1,28.4,16.9）；
ctx.closePath（）；
ctx.fillStyle=“rgb（222103,0）”；
ctx.fill（）；
//画碟形顶部。
ctx.beginPath（）；
ctx.moveTo（22.3,12.0）；
比塞尔曲线图（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）；
比塞尔曲线图（19.4,9.7,22.3,10.8,22.3,12.0）；
ctx.closePath（）；
ctx.fillStyle=“rgb（51190,0）”；
ctx.fill（）；
//保存船舶数据。
ship=ctx.getImageData（0,0,30,30）；
}
功能组件（宽度、高度、颜色、x、y、类型）{
this.type=type；
如果（类型==“图像”| |类型==“背景”）{
this.image=新图像（）；
this.image.src=颜色；
}
这个。宽度=宽度；
高度=高度；
这是0.speedX=0；
该值为0；
这个.x=x；
这个。y=y；
this.update=函数（）{
ctx=myGameArea.context；
如果（this.type==“text”）{
ctx.font=this.width+“”+this.height；
ctx.fillStyle=颜色；
ctx.fillText（this.text，this.x，this.y）；
}如果（类型==“图像”| |类型==“背景”）{
ctx.drawImage（此.image，
这个,x,，
这个,嗯,，
这个。宽度，这个。高度）；
如果（类型=“背景”）{
ctx.drawImage（this.image，this.x，
这个，y，这个，高度，
这个。宽度，这个。高度）；
}
}
否则{
ctx.fillStyle=颜色；
ctx.fillRect（this.x，this.y，this.width，this.height）；
}
}
this.newPos=函数（）{
this.x+=this.speedX；
this.y+=this.speedY；
如果（this.type==“背景”）{
if（this.y==（this.height））{
这个。y=0；
}
}
}
}
函数updateGameArea（）{
myGameArea.clear（）；
myBackground.speedY=1；
myBackground.newPos（）；
myBackground.update（）；
myGameArea.frameNo+=1；
ctx.putImageData（船舶，200200）；
}
函数everyinterval（n）{
如果（（myGameArea.frameNo/n）%1==0）{return true；}
返回false；
}
var memCanvas=document.createElement('canvas');
... draw your ship on the second canvas
canvas.drawImage(memCanvas,x,y);
在第二个内存画布上绘制船舶：
var memCanvas=document.createElement('canvas');
... draw your ship on the second canvas
canvas.drawImage(memCanvas,x,y);
问题是，使用
putImageData（）getImageData（）// 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
}
另一种方法是直接在画布上绘制形状，但使用中间画布将带来性能优势。问题是使用
putImageData（）getImageData（）