Question

我想知道如何改变我的Javascript以仅清除掉落的精灵，而不是整个画布（就像当前那样）。

我希望在画布上放置多个其他（动画）精灵，这些精灵不会以我的function animate结构的方式出现。

有没有办法，如果画布上有另一个图像/精灵，它就不会受到function animate.

的影响

我认为这条线需要改变：

ctx.clearRect(0, 0, canvas.width, canvas.height);

虽然我不知道我需要放入哪些参数。下降的精灵以60x60的大小绘制，但是当它们向下倾斜时，这是我清除唯一的精灵路径时所困扰的地方。

任何帮助将不胜感激：）

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");
canvas.width = 1408;
canvas.height = 640; 
canvasWidth = canvas.width;
canvasHeight = canvas.height;

var orangeEnemy = new Image();
orangeEnemy.src = "http://www.catholicsun.org/wp-content/uploads/2016/09/cropped-sun-favicon-512x512-270x270.png";
var yellowEnemy = new Image();
yellowEnemy.src = "http://www.clker.com/cliparts/o/S/R/S/h/9/transparent-red-circle-hi.png";

var srcX;
var srcY;
var enemySpeed = 2.75;
var images = [orangeEnemy, yellowEnemy];
var spawnLineY=-50;
var spawnRate=2500;
var spawnRateOfDescent=1.50;
var lastSpawn=-1;
var objects=[];
var startTime=Date.now();
animate();


    function spawnRandomObject() {
        var object = {
                x: Math.random() * (canvas.width - 15),
                y: spawnLineY,
                image: images[Math.floor(Math.random() * images.length)]
            }
        objects.push(object);
    }

    function animate(){
        var time=Date.now();
        if(time>(lastSpawn+spawnRate)){
            lastSpawn=time;
            spawnRandomObject();
        }

        requestAnimationFrame(animate);
        ctx.clearRect(0, 0, canvas.width, canvas.height);


        // move each object down the canvas
        for(var i=0;i<objects.length;i++){
            var object=objects[i];
            object.y += enemySpeed;
            ctx.drawImage(object.image, object.x, object.y, 60, 60);

        }

    }

<html>
<canvas id="canvas" style="border:3px solid"></canvas>
</html>

Answer 1

最简单，最快捷的方法是在当前画布上覆盖另一个画布，特别是精灵，需要一些CSS。把所有的精灵放在一个，其他的都放在另一个。 animate（）函数中的clearRect（）将仅适用于您的精灵画布，而不适用于另一个。

否则，您将必须跟踪精灵的位置，并使用clearRect（offsetX，offsetY，60,60）以60x60矩形编程清除每个。

P.S。原谅非格式化的答案......仍然想出来

Answer 2

清除一次性能。

最好清除整个画布并重新绘制精灵。使用前一个位置，检查重叠然后依次清除每个sprite，确保不清除现有的sprite将花费比清除屏幕一次更多的CPU周期。

清晰屏幕功能非常快，并且是在硬件中完成的，以下是Firefox（目前最快的渲染器）的性能测试结果，只需一次调用整个区域即可清除65K像素，然后每季度调用4次，然后16个电话每个清除16。（μs是1 / 1,000,000秒）

Each test clears 256*256 pixels Each sample is 100 tests
'Clear 1/1' Mean time: 213µs ±4µs 1396 samples
'Clear 4/4' Mean time: 1235µs ±14µs 1390 samples     
'Clear 16/16' Mean time: 4507µs ±42µs 1405 samples

正如您所看到的，清除65K像素最好在一次调用中完成，实际的javascript调用增加约100μs。

在Firefox上，要清除的像素数不会影响调用clearRect的调用执行时间，调用clearRect(0,0,256,256)和clearRect(0,0,16,16)都需要〜2μs

除了速度之外，尝试清除每个精灵的重叠动画精灵变得非常复杂，并且可以导致100次清晰调用，只有十几个精灵。这是由于重叠。

ctx.clearRect画布精灵

2 个答案:

清除一次性能。