Question

这是我的代码：

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

Answer 1

不应该是：

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的球的实例上。这也有效，但我仍然使用原型，这是在javascript中定义方法的正确方法。

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

为什么说我的对象“球”不存在方法绘制？

1 个答案: