es6类中的画布感
es6类中的画布感
提问于 2018-10-17 17:01:22
我想用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
Stack Overflow用户
回答已采纳
发布于 2018-10-17 17:10:10
您正在尝试在一个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事件(在触发之前等待所有资源，包括所有图像等)，则在window上使用load事件
window.addEventListener("load", () => { MyCanvasContext.start(); });附带注意:如果您的所有方法都是class，那么使用static语法没有多大好处，而且类不能处理多个画布。您可以考虑使用prototype方法，将画布作为构造参数传入，如下所示：
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>
Stack Overflow用户
发布于 2018-10-17 17:07:34
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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52860106
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号