javascript - javascript 中的 Canvas 、移动对象、clearRect

Question

基本上，我的问题是我无法理解为什么我在代码中使用的函数 clearRect 不清理矩形(为了使它们移动，我使用了 setinterval 函数)。我有正在移动的矩形。

在设置间隔函数中，您可以看到 context.clearRect(0, 0, context.elem.width, context.elem.height); 我试图将其放在循环之前(不起作用)并在循环中(相同:( )。可以解决这个问题吗？!感谢任何帮助。谢谢。

window.onload = function () {

    function Shape(x, y, w, h, fill) {
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
        this.fill = fill;
    }

    // get canvas element.
    var elem = document.getElementById('paper');
    context = elem.getContext('2d');
    //var container = {x:100, y:100, width:1200, height: 800};
    context.fillStyle = "black";
    context.fillRect(0, 0, elem.width, elem.height);


    // check if context exist
    if (elem.getContext) {

        var array = [];

        array.push(new Shape(20, 0, 50, 50, "red"));
        array.push(new Shape(20, 60, 50, 50, "red"));
        array.push(new Shape(20, 120, 50, 50, "red"));
        array.push(new Shape(80, 0, 50, 50, "red"));
        array.push(new Shape(80, 60, 50, 50, "red"));
        array.push(new Shape(80, 120, 50, 50, "red"));
        array.push(new Shape(140, 0, 50, 50, "red"));
        array.push(new Shape(140, 60, 50, 50, "red"));
        array.push(new Shape(140, 120, 50, 50, "red"));
        //context = elem.getContext('2d');
    }

    //function draw (){
    // context.fillStyle = 'red'; 
    //context.fillRect(container.x, container.y, container.width, container,height);
    //}

    setInterval(function () {

        /// clear canvas for each frame
        //context.clearRect(0, 0, context.elem.width, context.elem.height);

        /// iterate object array and move all objects
        for (var i = 0, oRec; oRec = array[i]; i++) {
            // context.clearRect(0, 0, context.elem.width, context.elem.height);

            oRec.x++; /// update each object's position
            context.beginPath();
            context.fillStyle = oRec.fill;
            context.fillRect(oRec.x, oRec.y, oRec.w, oRec.h);
            context.fill();

        }
    }, 40);
};

Answer 1

尝试使用此方法，因为上下文中没有 elem 属性:

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

或者直接使用elem(这样更快一点，而且写起来也更短):

context.clearRect(0, 0, elem.width, elem.height);

<强> Fiddle 1

clearRect() 清除 Canvas 上的所有内容，包括填充的背景( Canvas 元素默认是透明的，并且在使用 时将处于初始状态或再次变为透明状态)清除矩形())。

要么使用黑色 fillStyle 将 clearRect() 替换为 fillRect()，要么为元素设置 CSS 背景(后者不会)如果需要的话，不要与任何图像一起保存，即 toDataURL())。

黑色背景:

<强> Fiddle 2 using CSS background

<强> Fiddle 3 using fillRect instead of clearRect

您可以通过仅清除框来进一步优化 fillRect()(因为它比 clearRect() 慢)(请记住在每一侧添加一个像素以防止-别名像素)。