javascript - 球没有落入盒子(javascript)

Question

我创建了一个简单的网站如下:

当我在提示中输入任何文本并单击确定时，一个球将被放入第一个框中，即放入 Past Thoughts 框中。这是代码:

HTML

<h1>
  Welcome to zen module
</h1>
<p id="demo">
</p>
<div id="divn">
  <canvas id="myCanvas" width="100" height="300" style="transform: inherit; margin: 30px;">
  </canvas>
</div>
<div class="fixed-size-square" onclick="popup();">
  <span>
    Past Thoughts
  </span>
</div>
<div class="size-square" onclick="popup();">
  <span>
    Present Thoughts
  </span>
</div>
<div class="square" onclick="popup();">
  <span>
    Future Thoughts
  </span>
</div>
<button>
  I've no thoughts
</button>

JavaScript

var context;
var dx = 4;
var dy = 4;
var y = 25;
var x = 10;
var counter = 0;

function draw() {
    context = myCanvas.getContext('2d');
    context.clearRect(0, 0, 400, 400);
    context.beginPath();
    context.fillStyle = "red";
    context.arc(x, y, 10, 0, Math.PI * 2, true);
    context.closePath();
    context.fill();
    if (x < 0 || x > 100) dx = -dx;
    if (y < 0 || y > 200) dy = 0;
    //x+=dx;
    y += dy;
}

function popup() {
    var thought = prompt("Please enter your thought");
    if (thought !== null) {

        setInterval(draw, 10);
    } else window.alert("You should enter a thought");
}

CSS

.fixed-size-square {
    display: table;
    background: green;
}
.fixed-size-square span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    color: white
}
.size-square {
    display: table;
    background: green;
}
.size-square span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    color: white
}
.square {
    display: table;
    background: green;
}
.square span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    color: white
}
.fixed-size-square, .size-square, .square {
    float: left;
    margin: 20px;
    zoom: 1;
    position: relative;
    top: -291px;
    width: 150px;
    height: 150px;
    /*box-shadow: 10px 10px 5px #888888;*/
    /*position: absolute;*/
    /*margin: auto;*/
}
button {
    position: relative;
    margin: 0px auto;
}
/*.myCanvas {
    z-index: 0px;
}*/
 #divn {
    margin: 0px auto;
}

问题是:球落下时留在盒子后面。它在盒子里是不可见的。如何修复？

Fiddle

Answer 1

您可以在 .fixed-size-square, .size-square, .square 上使用 opacity: 0.5;

DEMO

编辑:这是一个DEMO使用优化的 CSS。