сделать холст смысл в es6 classess - PullRequest
Новая
       1

сделать холст смысл в es6 classess

0 голосов
/ 17 октября 2018

Я хочу сделать свой холст с классами es6;Я мог бы сделать это с es5, но в es6 у меня проблема: 

let canvas = {
    "myCanvas" : document.querySelector("#myCanvas")
};

let myCan = canvas.myCanvas;

class MyCanvasContext {
    static start() {

        if (myCan.getContext) {
            this.ctx = myCan.getContext('2d');

            this.draw();

        }
        else {
            console.write("Update");
        }
    }

    static draw() {
        this.ctx.fillStyle = 'rgb(200, 0, 0)';
        this.ctx.fillRect(10, 10, 50, 50);

        this.ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
        this.ctx.fillRect(30, 30, 50, 50);
    }
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Canvas</title>
    </head>
    <body>
         <main onload="MyCanvasContext.start();">
            <canvas id="myCanvas" width="150" height="150"></canvas>
         </main>
    </body>
</html>

Это ничего мне не показывает;Что я должен делать ???Без класса это работает правильно, и я не забыл установить тип как модуль

Ответы [ 2 ]

0 голосов
/ 17 октября 2018

Вы пытаетесь использовать событие load для элемента main.Только некоторые элементы (например, body) поддерживают событие load.

Вместо этого просто убедитесь, что ваш тег script находится в конце документа, непосредственно перед закрывающим тегом </body>, иЗвоните MyCanvasContext.start(); напрямую: 

let canvas = {
    "myCanvas" : document.querySelector("#myCanvas")
};

let myCan = canvas.myCanvas;

class MyCanvasContext {
    static start() {
        if (myCan.getContext) {
            this.ctx = myCan.getContext('2d');

            this.draw();

        }
        else {
            console.write("Update");
        }
    }

    static draw() {
        this.ctx.fillStyle = 'rgb(200, 0, 0)';
        this.ctx.fillRect(10, 10, 50, 50);

        this.ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
        this.ctx.fillRect(30, 30, 50, 50);
    }
}

MyCanvasContext.start();
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Canvas</title>
    </head>
    <body>
         <main>
            <canvas id="myCanvas" width="150" height="150"></canvas>
         </main>
    </body>
</html>

Или, если вы действительно хотите дождаться события load (которое ожидает все ресурсы перед запуском, включая все изображения и т. Д.), Используйтесобытие load в window: 

window.addEventListener("load", () => { MyCanvasContext.start(); });

Примечание: использование синтаксиса class не очень полезно, если все ваши методы static, и вы нене сможет обработать более одного холста вашим классом.Вместо этого вы можете использовать методы-прототипы, передавая холст в качестве параметра конструкции, например: 

class MyCanvasContext {
    constructor(myCan) {
        if (!myCan.getContext) {
            throw new Error("myCan must be a canvas element");
        }
        this.myCan = myCan;
        this.ctx = this.myCan.getContext("2d");
    }
    start() {
        this.draw();
    }

    draw() {
        this.ctx.fillStyle = 'rgb(200, 0, 0)';
        this.ctx.fillRect(10, 10, 50, 50);

        this.ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
        this.ctx.fillRect(30, 30, 50, 50);
    }
}

const mc = new MyCanvasContext(document.getElementById("myCanvas"));
mc.start();
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Canvas</title>
    </head>
    <body>
         <main>
            <canvas id="myCanvas" width="150" height="150"></canvas>
         </main>
    </body>
</html>
0 голосов
/ 17 октября 2018

вызов метода для тела onLoad 

 <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Canvas</title>
        </head>
        <body onload="MyCanvasContext.start();">
             <main >
                <canvas id="myCanvas" width="150" height="150"></canvas>
             </main>

            <script>
                let canvas = {
                    "myCanvas" : document.querySelector("#myCanvas")
                };

                let myCan = canvas.myCanvas;

                class MyCanvasContext {
                    static start() {
                        if (myCan.getContext) {
                            this.ctx = myCan.getContext('2d');

                            this.draw();

                        }
                        else {
                            console.write("Update");
                        }
                    }

                    static draw() {
                        this.ctx.fillStyle = 'rgb(200, 0, 0)';
                        this.ctx.fillRect(10, 10, 50, 50);

                        this.ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
                        this.ctx.fillRect(30, 30, 50, 50);
                    }
                }
    </script>
        </body>
    </html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...