gpt4 book ai didi

javascript - 无法将一个 Canvas 放在另一个 Canvas 下

转载 作者:行者123 更新时间:2023-11-28 12:16:11 28 4
gpt4 key购买 nike

我想把 Canvas 放在另一个 Canvas 下面。我是 javascript 的新手,所以如果下面的代码看起来有点乱,我提前道歉。我想让名为“myCanvas”的 Canvas 出现在“coinAnimation”后面。非常感谢所有回复。

HTML

<div id="wrapper">
<canvas id="coinAnimation" height="500" width="500"></canvas>
<canvas id="myCanvas" height="500" width="600"></canvas>
</div>

Javascript

<script type="text/javascript">
(function () {
var coin,
coinImage,
canvas;

function gameLoop () {
window.requestAnimationFrame(gameLoop);
coin.update();
coin.render();
}

function sprite (options) {
var that = {},
frameIndex = 0,
tickCount = 0,
ticksPerFrame = options.ticksPerFrame || 0,
numberOfFrames = options.numberOfFrames || 1;

that.context = options.context;
that.width = options.width;
that.height = options.height;
that.image = options.image;

that.update = function () {

tickCount += 1;

if (tickCount > ticksPerFrame) {

tickCount = 0;

// If the current frame index is in range
if (frameIndex < numberOfFrames - 1) {

// Go to the next frame
frameIndex += 1;
} else {
frameIndex = 0;
}
}
};
that.render = function () {

// Clear the canvas
that.context.clearRect(0, 0, that.width, that.height);

// Draw the animation
that.context.drawImage(
that.image,
frameIndex * that.width / numberOfFrames,
-110,
that.width / numberOfFrames,
that.height,
0,
0,
that.width / numberOfFrames,
that.height);
};

return that;
}

// Get canvas
canvas = document.getElementById("coinAnimation");
canvas.width = 600;
canvas.height = 300;

// Create sprite sheet
coinImage = new Image();

// Create sprite
coin = sprite({
context: canvas.getContext("2d"),
width: 1000,
height: 300,
image: coinImage,
numberOfFrames: 10,
ticksPerFrame: 7
});

// Load sprite sheet
coinImage.addEventListener("load", gameLoop);
coinImage.src = "images/test2.png";

} ());
</script>

<script type="text/javascript">
window.addEventListener('load', function () {
var
img = new Image,
ctx = document.getElementById('myCanvas').getContext('2d');

img.src = "images/back.png";
img.addEventListener('load', function () {

var interval = setInterval(function() {
var x = 0, y = 0;

return function () {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.drawImage(img, x, y);

x += -1;
if (x > ctx.canvas.width) {
x = 0;
}
};
}(), 1000/40);
}, false);
}, false);
</script>

最佳答案

参见此处: jsfilddle.net 。我添加了背景颜色来演示定位和 z-index。

首先,使包装器 div 位置相对。这是容器 div 将基于的位置。然后使容器 div 绝对定位到 (0,0)。然后,设置 z-index,使 myCanvas 位于 coinAnimation 之后。

CSS:

#wrapper
{
position:relative;
}

#coinAnimation
{
background-color:blue;
position:absolute;
z-index:1;
}
#myCanvas
{
background-color:red;
position:absolute;
top:0px;
left:0px;
z-index:0;
}

HTML:

<div id="wrapper">
<canvas id="coinAnimation" height="500" width="500"></canvas>
<canvas id="myCanvas" height="500" width="600"></canvas>
</div>

关于javascript - 无法将一个 Canvas 放在另一个 Canvas 下,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22106239/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com