javascript - 为什么它说我的对象 "ball"不存在方法draw？-6ren

javascript - 为什么它说我的对象 "ball"不存在方法draw？

转载作者：行者123 更新时间：2023-11-28 20:00:10

25

4

这是我的代码:

    <!DOCTYPE html>
    <html>
      <head>
        <title>Touch Tracker Marker</title>
        <meta name="viewport" content="width=device-width, user-scalable=no">
    <style type="text/css">
    body { margin: 0px; overflow: hidden; }
    canvas { border: 1px solid black; }
    </style>
    <script type="text/javascript" src="magictouch.js"></script>
    <script type="text/javascript">

    var canvas;
    var ctx;
    var w = 0;
    var h = 0;

    var timer;
    var updateStarted = false;
    var touches = [];
    var balles= [];
    function  ball(x,y){
        this.x=x;
        this.y=y;
        function draw(){
            ctx.beginPath();
            ctx.arc(this.x, this.y, 20, 0, 2*Math.PI, true);

            ctx.fillStyle = "rgba(0, 0, 200, 0.2)";
            ctx.fill();

            ctx.lineWidth = 2.0;
            ctx.strokeStyle = "rgba(0, 0, 200, 0.8)";
            ctx.stroke();
        }
    };

    function update() {
        if (updateStarted) return;
        updateStarted = true;

        var nw = window.innerWidth;
        var nh = window.innerHeight;

        if ((w != nw) || (h != nh)) {
            w = nw;
            h = nh;
            canvas.style.width = w+'px';
            canvas.style.height = h+'px';
            canvas.width = w;
            canvas.height = h;
        }

        ctx.clearRect(0, 0, w, h);

        var i, len = touches.length;
        for (i=0; i<len; i++) {
            var touch = touches[i];
        var px = touch.pageX;
        var py = touch.pageY;

        b = new ball(px,py);
        b.draw();

        console.log('drawn circle at ' + px +',' + py);
        }

        updateStarted = false;
    }

    function ol() {
        canvas = document.getElementById('canvas');
        ctx = canvas.getContext('2d');
        timer = setInterval(update, 15);

    canvas.addEventListener('touchend', function() {
        ctx.clearRect(0, 0, w, h);
    });

    canvas.addEventListener('touchmove', function(event) {
      event.preventDefault();
      touches = event.touches;
    });

    canvas.addEventListener('touchstart', function(event) {
      console.log('start');
    });
    };

    </script>
    </head>
    <body onload="ol()">

    <canvas id="canvas" width="300" height="300" style="top:0px; left:0px; width: 300px; height: 300px;"></canvas>

    </body>
    </html>

最佳答案

不应该是:

function  ball(x,y){
    this.x=x;
    this.y=y;
};

ball.prototype.draw = function() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, 20, 0, 2*Math.PI, true);

        ctx.fillStyle = "rgba(0, 0, 200, 0.2)";
        ctx.fill();

        ctx.lineWidth = 2.0;
        ctx.strokeStyle = "rgba(0, 0, 200, 0.8)";
        ctx.stroke();
}

将函数draw添加到ball.prototype，有效地将其添加到所有ball类型的对象

编辑:在您在评论中提供的链接中，w3schools 添加了这样的功能:

function  ball(x,y){
    this.x=x;
    this.y=y;
    function myFunc() { ... }
    this.draw= myFunc;
};

基本上，每次调用 ball 时，它都会创建一个函数对象，并将其附加到名为 draw 的 ball 实例上。这也有效，但我仍然会选择使用原型(prototype)，这是在 javascript 中定义方法的正确方法。

将函数添加到原型(prototype)中使得单个函数可用于 ball 的所有实例，而不是为每个 ball 创建一个新的函数对象。

关于javascript - 为什么它说我的对象 "ball"不存在方法draw？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21797108/

25

4

0

文章推荐： javascript:点击后切换按钮的行为

文章推荐： testing - 属性抛出 xUnit 和测试资源管理器

文章推荐：使用 Leadfoot 测试拖放

文章推荐：测试 Yesod 处理程序 - 示例

java - 对象 a = 对象 b；对象 a 会发生什么？
我的一位教授给了我们一些考试练习题，其中一个问题类似于下面(伪代码): a.setColor(blue); b.setColor(red); a = b; b.setColor(purple); b
JavaScript 测试(对象 && 对象 !== "null"&& 对象 !== "undefined")
我似乎经常使用这个测试 if( object && object !== "null" && object !== "undefined" ){ doSomething(); } 在对象上，我
C#对象/对象
C# Object/object 是值类型还是引用类型？我检查过它们可以保留引用，但是这个引用不能用于更改对象。 using System; class MyClass { public s
javascript - 通过ajax发送json - 对象 - 对象
我在通过 AJAX 发送 json 时遇到问题。 var data = [{"name": "Will", "surname": "Smith", "age": "40"},{"name": "Wil
javascript - 如何获取值[对象][对象]
当我尝试访问我的 View 中的对象 {{result}} 时(我从 Express js 服务器发送该对象)，它只显示 [object][object]有谁知道如何获取 JSON 格式的值吗？这是
java - 对象...对象[] 和格式
我有不同类型的数据(可能是字符串、整数......)。这是一个简单的例子: public static void main(String[] args) { before("one"); }
javascript - 如何修复[对象，对象]
嗨，我是 json 和 javascript 的新手。我在这个网站找到了使用json数据作为表格的方法。我很好奇为什么当我尝试使用 json 数据作为表时，我得到 [Object,Object]
JavaScript [对象][对象] 调试
已关闭。此问题需要 debugging details 。目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and the
java - 对象==空或空==对象？
我听别人说 null == object 比 object == null check 例如: void m1(Object obj ) { if(null == obj) // Is thi
VBS教程：对象-Match 对象
Match 对象提供了对正则表达式匹配的只读属性的访问。说明 Match 对象只能通过 RegExp 对象的 Execute 方法来创建，该方法实际上返回了 Match 对象的集合。所有的
VBS教程：对象-Class 对象
Class 对象使用 Class 语句创建的对象。提供了对类的各种事件的访问。说明不允许显式地将一个变量声明为 Class 类型。在 VBScript 的上下文中，“类对象”一词指的是用
VBS教程：对象-Folder 对象
Folder 对象提供对文件夹所有属性的访问。说明以下代码举例说明如何获得 Folder 对象并查看它的属性： Function ShowDateCreated(f
VBS教程：对象-File 对象
File 对象提供对文件的所有属性的访问。说明以下代码举例说明如何获得一个 File 对象并查看它的属性： Function ShowDateCreated(fil
VBS教程：对象-Drive 对象
Drive 对象提供对磁盘驱动器或网络共享的属性的访问。说明以下代码举例说明如何使用 Drive 对象访问驱动器的属性： Function ShowFreeSpac
VBS教程：对象-FileSystemObject 对象
FileSystemObject 对象提供对计算机文件系统的访问。说明以下代码举例说明如何使用 FileSystemObject 对象返回一个 TextStream 对象，此对象可以被读
对象
我是 javascript OOP 的新手，我认为这是一个相对基本的问题，但我无法通过搜索网络找到任何帮助。我是否遗漏了什么，或者我只是以错误的方式解决了这个问题？这是我的示例代码: functio
对象
我可以很容易地创造出很多不同的对象。例如像这样: var myObject = { myFunction: function () { return ""; } };
对象
function Person(fname, lname) { this.fname = fname, this.lname = lname, this.getName = function()
javascript - JSON 返回(对象，对象)
任何人都可以向我解释为什么下面的代码给出 (object, Object) 吗？ (console.log(dope) 给出了它应该的内容，但在 JSON.stringify 和 JSON.parse
javascript - 返回 [对象，对象] 的工具提示
我正在尝试完成散点图 exercise来自免费代码营。然而，我现在只自己学习了 d3 几个小时，在遵循 lynda.com 的教程后，我一直在尝试确定如何在工具提示中显示特定数据。 This code

首页

博学

6Ren·AI

商城

javascript - 为什么它说我的对象 "ball"不存在方法draw？