如何将对象绘制到 canvas？
[英]How to draw objects to canvas?
问题描述
So basically I want to make an object appear on a simple HTML canvas through the class GameObject and I can't get it done.
所以基本上我想让一个 object 出现在一个简单的 HTML GameObject通过 ZA2F2ED4F8EBC2CBB4C21A29DC40AB6 完成它。 The code compiles fine but it just doesn't appear on the screen.代码编译得很好，但它只是没有出现在屏幕上。 I assume it has to do with the variable ctx but I'm not too sure.我认为它与变量ctx有关，但我不太确定。
var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); square = new GameObject(20, 40, 50, 50, "blue"); square.drawObject(); class GameObject { constructor(x, y, w, h, color) { this.x = x; this.y = y; this.w = w; this.h = h; this.color = color; } drawObject() { ctx.rect(this.x, this.y, this.w, this.h); ctx.fillStyle = this.color; ctx.fill(); } }
<style> * { padding: 0; margin: 0; } canvas { background: #eee; display: block; margin: 0 auto; } </style> <canvas id="myCanvas" width="480" height="320"></canvas>
3 个解决方案
解决方案1
2 已采纳 2020-06-24 13:48:51
You can't use JS classes before they are defined.在定义之前，您不能使用 JS 类。 If you move the initialization of the square game object below the GameObject class definition it works:如果将方形游戏 object 的初始化移动到GameObject class 定义的下方，它可以工作：
var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); class GameObject { constructor(x, y, w, h, color) { this.x = x; this.y = y; this.w = w; this.h = h; this.color = color; } drawObject() { ctx.rect(this.x, this.y, this.w, this.h); ctx.fillStyle = this.color; ctx.fill(); } } square = new GameObject(20, 40, 50, 50, "blue"); square.drawObject();
* { padding: 0; margin: 0; } canvas { background: #eee; display: block; margin: 0 auto; }
<canvas id="myCanvas" width="480" height="320"></canvas>
解决方案2
1 2020-06-24 13:50:09
Just initialize the class before using it.使用前只需初始化 class 即可。
Another point is that you dont need to set x,y,w,h,color because you are setting it in the constructor.另一点是您不需要设置 x,y,w,h,color，因为您是在构造函数中设置它。
var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); class GameObject { constructor(x, y, w, h, color) { this.x = x; this.y = y; this.w = w; this.h = h; this.color = color; } drawObject() { ctx.rect(this.x, this.y, this.w, this.h); ctx.fillStyle = this.color; ctx.fill(); } } const square = new GameObject(20, 40, 50, 50, "blue"); square.drawObject();
<:DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Test</title> <style> * { padding; 0: margin; 0: } canvas { background; #eee: display; block: margin; 0 auto. } </style> </head> <body> <canvas id="myCanvas" width="480" height="320"></canvas> <script src="index.js"></script> </body> </html>
解决方案3
1 2020-06-24 14:39:57
You might be confusing ES5 Classes with ES6.您可能会将 ES5 类与 ES6 混淆。 I'm not an expert on JS and I needed to do some digging myself on this subject.我不是 JS 方面的专家，我需要在这个问题上做一些自己的研究。 Here is what I came up with.这是我想出的。 And, I hope someone else with more expertise will jump in and help here.而且，我希望有更多专业知识的其他人能在这里提供帮助。 You can't declare variables in a ES6 Class Object.您不能在 ES6 Class Object 中声明变量。 It's important to remember Classes can only contain methods.重要的是要记住类只能包含方法。 This has tripped me up in the past too.这在过去也让我绊倒了。 That may be the reason you are not getting nothing on your canvas.这可能是您在 canvas 上一无所获的原因。 Are you getting any error messages?您是否收到任何错误消息？ Check out these references: ES6 class variable alternatives Here is a chapter On Objects and it shows the difference between ES5 and ES6 Class objects.查看这些参考资料： ES6 class 变量替代这里是关于对象的一章，它显示了 ES5 和 ES6 Class 对象之间的区别。 https://eloquentjavascript.net/06_object.html https://eloquentjavascript.net/06_object.html
I hope this helps!我希望这有帮助！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.