Question

我做了一个游戏，玩家按下随机位置移动的矩形会增加分数。这是我的代码：

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <canvas id = "c" width = "500" height = "500"></canvas>
        <canvas id = "d" width = "60" height = "60" onclick = "inc()"></canvas>
        <style>
        body {
        margin:0;
        padding:0;
        background-color:blue;
        }

        #d {
        position:absolute;
        }
        </style>
        <script>
            var can = document.getElementById("c");
            var can2 = document.getElementById("d");
    can.height = window.innerHeight;
    can.width = window.innerWidth;
    can2.height = window.innerHeight;
    can2.width = window.innerWidth;
    var s = can.getContext("2d");
    var s2 = can2.getContext("2d");
    var points = 0;
    
    function move() {
        h = Math.ceil(Math.random()*(can2.height-60))+20;
        w = Math.ceil(Math.random()*(can2.width-50))+20;
        s2.clearRect(0, 0, window.innerHeight, window.innerWidth);
        s2.fillRect(this.w, this.h, 60, 60);
    }
    
    function inc() {
        s.clearRect(0, 0, window.innerHeight, window.innerWidth);
        s.fillText(points++, 300, 40);
        return points;
    }
    
    s.font = "bold 35px Arial";
    s.textAlign = points;
    s.fillText(points, 300, 40);
    
    s2.fillStyle = "#DEF012";
    s2.fillRect(60, 60, 58, 55);
    
    setInterval(move, 200);
        </script>
    </body>
</html>

＆＃13;

但是当矩形移动时，侧面的矩形颜色会卡住。如何在没有这个问题的情况下移动矩形？

Answer 1

您对clearRect的调用中的参数是向后的。

另请注意，似乎您可能意味着#c canvas也是position：absolute也是。

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <canvas id = "c" width = "500" height = "500"></canvas>
        <canvas id = "d" width = "60" height = "60" onclick = "inc()"></canvas>
        <style>
        body {
        margin:0;
        padding:0;
        background-color:blue;
        }

        #d {
        position:absolute;
        }
        </style>
        <script>
            var can = document.getElementById("c");
            var can2 = document.getElementById("d");
    can.height = window.innerHeight;
    can.width = window.innerWidth;
    can2.height = window.innerHeight;
    can2.width = window.innerWidth;
    var s = can.getContext("2d");
    var s2 = can2.getContext("2d");
    var points = 0;
    
    function move() {
        h = Math.ceil(Math.random()*(can2.height-60))+20;
        w = Math.ceil(Math.random()*(can2.width-50))+20;
        s2.clearRect(0, 0, window.innerWidth, window.innerHeight);
        //s2.clearRect(0, 0, window.innerHeight, window.innerWidth);
        s2.fillRect(this.w, this.h, 60, 60);
    }
    
    function inc() {
        s.clearRect(0, 0, window.innerHeight, window.innerWidth);
        s.fillText(points++, 300, 40);
        return points;
    }
    
    s.font = "bold 35px Arial";
    s.textAlign = points;
    s.fillText(points, 300, 40);
    
    s2.fillStyle = "#DEF012";
    s2.fillRect(60, 60, 58, 55);
    
    setInterval(move, 200);
        </script>
    </body>
</html>

Answer 2

我创建一个盒子对象并检查其坐标，而不是将一个画布移到另一个上面这样的事情：

xAxis: {
   min: min,
   max: max,
   type: 'datetime',
},

来源：

为什么画布矩形的颜色会卡住？

2 个答案: