HTML5 Canvas меняет круг на квадрат

Я хотел бы создать холст с синим квадратом размером 100x100 пикселей. Разместите квадрат в левой части страницы на расстоянии 50 пикселей от верхнего края. Используя javascript, анимируйте этот квадрат так, чтобы он перемещался на 10 пикселей вправо и на 10 пикселей вниз в секунду. Когда прямоугольник ударяется о край окна или выходит за его пределы, измените направление соответствующей оси.

Следующий холст возвращает синий круг, но мне нужен квадрат 100X100 пикселей вместо круга. Я попробовал 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>

вы просто меняете arc на rect: me.rect(centerX,centerY,radius,radius);

— 28.09.2018 14:45

Спасибо, но квадратная коробка вернулась до того, как коснулась верхней части, а также переполнила нижнюю часть.

— 28.09.2018 14:54

Да, спасибо, теперь он работает @ Just code. Также спасибо enxaneta. тоже работает :)

— 28.09.2018 15:08

Добро пожаловать: D

— 28.09.2018 15:09

javascript html5-canvas

28.09.2018 14:33

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

185

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы можете использовать прямоугольник

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>

28.09.2018 14:45

Пользуюсь me.rect(centerX-radius, centerY-radius,2*radius,2*radius). Таким образом, центр прямоугольника будет в том же месте, что и центр круга. Ширина прямоугольника должна быть равна 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>

28.09.2018 14:58

Другие вопросы по теме

Падение частоты кадров Socket.io

Затем воспроизведение видео было завершено () с наложением неподвижного изображения со ссылками

В чем разница между масштабом холста html5 и увеличением размеров холста для масштабирования?

Распечатать весь холст Cytoscape.js HTML5. Не только видимая часть

Как заполнить прямоугольник только до заданной точки с помощью Konva

Анимация линий с фигурами на холсте

Как записать ImageData в контекст холста HTML5?

Angular 6 - шаблон ячейки сетки пользовательского интерфейса Kendo

Повернуть круг вокруг холста треугольника

Как загрузить холст html5 как изображение с помощью chrome.downloads API Chrome

HTML5 Canvas меняет круг на квадрат

Ответы 2

Другие вопросы по теме

Похожие вопросы