Question

我想用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>

它什么也没给我看；我该怎么办？？？没有类，它就可以正常工作，而且我也不会忘记将设置类型设置为模块

Answer 1

body 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>

Answer 2

您正试图在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语法并不会带来太多好处，并且您的类不能处理多个画布。您可能会考虑使用原型方法，将canvas作为构造参数传入，如下所示：

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>

在es6类中制作画布感

2 个答案: