小编use*_*111的帖子

我正在重新提出这个问题，因为我没有在上一个问题中明确我想要什么。

有谁知道如何使用矩形在 Canvas 中进行弹性碰撞或处理碰撞？或者可以指出我正确的方向？

我创建了一个具有多个方块的画布，并希望每个方块在它们接触时都能偏转。

这是我放在一起显示黑色缓冲区画布的快速小提琴http://jsfiddle.net/claireC/Y7MFq/10/

第 39 行是我开始碰撞检测的地方，第 59 行是我尝试执行它的地方。我将有 3 个以上的方块四处移动，并希望它们在相互接触时/当它们相互接触时偏转

var canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d");
context.fillStyle = "#FFA500";
    context.fillRect(0, 0, canvas.width, canvas.height);

var renderToCanvas = function (width, height, renderFunction) {
    var buffer = document.createElement('canvas');
    buffer.width = width;
    buffer.height = height;
    renderFunction(buffer.getContext('2d'));
    return buffer;
};

var drawing = renderToCanvas(100, 100, function (ctx) {
ctx.fillStyle = "#000";
    ctx.fillRect(0, 0, canvas.width, canvas.height);


});

var drawing2 = renderToCanvas(100, 100, function (ctx) {
ctx.fillStyle = "blue";
    ctx.fillRect(0, 0, canvas.width, …

我用一个透明的固定标题创建了一个js小提琴http://jsfiddle.net/claireC/8SUmn/.

滚动时,您可以看到文本在其后面向上滚动.如何让文本消失或隐藏在滚动的透明div后面.

编辑:忘了提到背景是图像.

注意:我是编码的初学者.这是我玩代码并试图解决问题.

这是我的HTML:

<div class="container">

<header>
    <ul>
        <li>list one</li>
        <li>list3   </li>
        <li>list2</li>
    </ul>
</header>

<div class="text">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce placerat sapien eget ligula egestas, quis aliquam velit varius. Phasellus mollis mollis sem quis porttitor. Pellentesque scelerisque mauris et magna tincidunt, vel pharetra enim pharetra. Duis a lobortis purus. Sed dignissim fermentum nibh convallis eleifend. In quis interdum arcu. Proin interdum, lorem et luctus laoreet, felis purus pharetra turpis, eu …