HTML5 Canvas: не рисовать - PullRequest
Новая
       5

HTML5 Canvas: не рисовать

1 голос
/ 24 апреля 2019

В настоящее время я создаю простую программу с использованием HTML Canvas и Javascript. Все, что мне нужно, - это нарисовать шар в координатах на холсте, а затем перемещаться с использованием некоторых переменных скорости и т. Д.

Проблема в том, что я создал объект Ball, так как намереваюсь отображать на экране несколько шариков одновременно, однако на холсте ничего не отображается.

Я перечитывал это несколько раз, я не получаю ошибок, поэтому я изо всех сил пытаюсь выяснить, что происходит с этим.

EDIT: Я добавил консольный журнал, чтобы убедиться, что drawSelf() запущен, но это не ошибка / результат

CODE 

<!DOCTYPE html>
<html>
    <head>
        <title>Bouncing Ball</title>
    </head>

    <script>
    var Date
    var canvas;
    var ctx;
    var dx=5;
    var dy=5;

    function init(){
        canvas = document.getElementById('game');
        ctx = canvas.getContext('2d');
        setInterval(draw,10);
        console.log("Initialised: " + new Date());
    }

    function Ball(x, y, dx, dy){
        this.x = x;
        this.y = y;
        this.dx = dx;
        this.dy = dy;

        this.drawSelf = function () {
            ctx.beginPath();
            ctx.fillStyle = "#4286f4";
            ctx.arc(this.x,this.y,20,0,Math.PI*2,true);
            ctx.closePath();
            console.log("Ball is drawing self!");

            if(this.x<0 || this.x>800){ 
                dx=-dx; 
            }
            if(this.y<0 || this.y>800){
            dy=-dy; 
            }

            this.x+=this.dx; 
            this.y+=this.dy;
        }

        this.getX = function () {
            console.log("X:" + this.x);
            console.log("Y:" + this.y);
            }
        }

    //Creating Ball object.
    let ball1 = new Ball(400, 400, 5, 5);

    function draw(){
        ball1.drawSelf();
    }
    </script>
    <body onLoad="init()">
    <div id="canvas-area">
        <canvas id="game" width="800" height="800"></canvas>
    </div>
    </body>
<html>

1 Ответ

2 голосов
/ 24 апреля 2019

Вы забыли добавить ctx.stroke () или ctx.fill (), взятые из документов Mozilla 

this.drawSelf = function () {
        ctx.beginPath();
        ctx.fillStyle = "#4286f4";
        ctx.arc(this.x,this.y,20,0,Math.PI*2,true);
        ctx.stroke();
        ctx.closePath();
        console.log("Ball is drawing self!");

        if(this.x<0 || this.x>800){ 
            dx=-dx; 
        }
        if(this.y<0 || this.y>800){
        dy=-dy; 
        }

        this.x+=this.dx; 
        this.y+=this.dy;
    }

Кроме того, sidenote, поскольку вы не устанавливаете фон при каждом рисовании, ваш холст просто добавляет шар в его текущее состояние, в результате чего получается крутой рисунок , но то, что вы, вероятно, не хотите. Чтобы это исправить, сделайте этот метод рисования. 

function draw(){
    ctx.fillStyle = "blue";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ball1.drawSelf();
}

РЕДАКТИРОВАТЬ: вместо использования setInterval я рекомендую использовать requestAnimationFrame. Подробнее об этом можно прочитать здесь

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...