Question

我想创建一个画布，上面有一个100x100像素的蓝色正方形。将正方形放在页面左侧，距顶部50像素。使用javascript动画此正方形，使其每秒向右移动10像素，向下移动10像素。当盒子碰到或越过窗口的边缘时，请更改相关轴的方向。

以下画布返回蓝色圆圈，但我希望100X100px正方形而不是圆圈。我尝试了rect(50, 50, 50, 50);，但是动画停止了工作

<style type="text/css">
    canvas{
        border-style: inset;
        background-color: lightgray;
        border-radius: 5px;
    }
</style>
</head>
<body style="background-color: gray;" onload="animate()">
    <canvas id="bouncyBall" width="500" height="250">
    </canvas>

    <script type="text/javascript">
        var animation;
        var centerX = 50;
        var centerY = 50;
        var radius = 20;
        var boardX = 500;
        var boardY = 250;
        var ballDx = 2;
        var ballDy = 2;

        function drawBall() {
            var content = document.getElementById("bouncyBall");
            var me = content.getContext("2d");
            me.clearRect(0,0,content.width,content.height);

            centerX = centerX + ballDx;
            centerY = centerY + ballDy;

            me.beginPath();
            me.arc(centerX,centerY,radius,0,Math.PI*2,false);
            me.stroke();
            me.fillStyle = "blue";
            me.fill();;
            me.stroke();

            if (centerY > boardY - radius || centerY - radius < 0) {
                ballDy = -1*ballDy;
            }
            if (centerX > boardX - radius || centerX < radius) {
                ballDx = -1*ballDx;
            }
        }

        function animate() {
            clearInterval(animation);
            setInterval(drawBall, 25);
        }
    </script>
</body>

Answer 1

您可以使用rect

var animation;
        var centerX = 50;
        var centerY = 50;
        var radius = 0;
        var boardX = 500;
        var boardY = 250;
        var ballDx = 2;
        var ballDy = 2;
        var width = 100;
        var height = 100;

        function drawBall() {
            var content = document.getElementById("bouncyBall");
            var me = content.getContext("2d");
            me.clearRect(0,0,content.width,content.height);

            centerX = centerX + ballDx;
            centerY = centerY + ballDy;

            me.beginPath();
            me.rect(centerX,centerY,width,height);
            me.stroke();
            me.fillStyle = "blue";
            me.fill();;
            me.stroke();

            if (centerY > boardY - width || centerY - radius < 0) {
                ballDy = -1*ballDy;
            }
            if (centerX > boardX - height || centerX < radius) {
                ballDx = -1*ballDx;
            }
        }

        function animate() {
            clearInterval(animation);
            setInterval(drawBall, 25);
        }
        
        animate();

canvas{
        border-style: inset;
        background-color: lightgray;
        border-radius: 5px;
    }

<canvas id="bouncyBall" width="500" height="250">
    </canvas>

Answer 2

我正在使用me.rect(centerX-radius, centerY-radius,2*radius,2*radius)。这样，矩形的中心与圆的中心在同一点。矩形的宽度应为br 2 *半径。

        //var animation;
        var centerX = 50;
        var centerY = 50;
        var radius = 20;
        var boardX = 500;
        var boardY = 250;
        var ballDx = 2;
        var ballDy = 2;

        function drawBall() {
            var content = document.getElementById("bouncyBall");
            var me = content.getContext("2d");
            me.clearRect(0,0,content.width,content.height);

            centerX = centerX + ballDx;
            centerY = centerY + ballDy;
            /*
            me.beginPath();
            me.arc(centerX,centerY,radius,0,Math.PI*2,false);
            //me.stroke();
            me.fillStyle = "blue";
            me.fill();
            me.stroke();*/
          
            me.beginPath();
            me.rect(centerX-radius, centerY-radius,2*radius,2*radius);
            me.fillStyle = "blue";
            me.fill();
            me.stroke();

            if (centerY > boardY - radius || centerY - radius < 0) {
                ballDy = -1*ballDy;
            }
            if (centerX > boardX - radius || centerX < radius) {
                ballDx = -1*ballDx;
            }
        }



        function animate() {
            clearInterval(animate);
            setInterval(drawBall, 25);
        }




animate()

 canvas{
        border-style: inset;
        background-color: lightgray;
        border-radius: 5px;
    }

<canvas id="bouncyBall" width="500" height="250">
    </canvas>

HTML5 Canvas将圆圈更改为正方形

2 个答案: