0

从我的角度来看，我正在以正确的方式做任何事情。当页面加载时我开始我的脚本，我的语法没问题。我想的问题是init函数没有加载，有人能指出我在哪里犯了错误吗？

var canvas;
    var ctx;
    var x = 75;
    var y = 50;
    var r = 100;
    var width = 400;
    var height = 300;
    var drag = false;

    addEventListener("load",windowLoaded,false);

    function windowLoaded(){
        init();
        console.log("beertje");
    }

    function init() {
     canvas = document.getElementById("canvas");
     ctx = canvas.getContext("2d");
     return setInterval(Circle, 10);
     canvas.onmousedown = myDown;
     canvas.onmouseup = myUp;
     console.log("beertje");


    }

    function Circle(x,y,r) {
     ctx.beginPath();
     ctx.arc(x,y,r,0,Math.PI,true);
     ctx.closePath();
     ctx.fill();
     }

     function draw() {
     clear();
     arc(x,y,r,0,Math.PI,true);
     ctx.fillStyle = "#444444";
     arc(x - 15, y - 15, r, 0, Math.PI, true);
    }

    function myMove(e){
     if (drag){
      x = e.pageX - canvas.offsetLeft;
      y = e.pageY - canvas.offsetTop;
     }
    }

    function myDown(e){
     if (e.pageX < x + 15 + canvas.offsetLeft && e.pageX > x - 15 +
     canvas.offsetLeft && e.pageY < y + 15 + canvas.offsetTop &&
     e.pageY > y -15 + canvas.offsetTop){
      x = e.pageX - canvas.offsetLeft;
      y = e.pageY - canvas.offsetTop;
      drag = true;
      canvas.onmousemove = myMove;
     }
    }

    function myUp(){
     drag = false;
     canvas.onmousemove = null;
    }
4

1 回答 1

1

代码中的第一个问题是不带参数的setInterval()调用。Circle()尽管如此，还是有 global和x，它们并没有在里面定义，因为它的同名参数会影响全局变量。（功能范围）yrCircle()

但是，您可以将这些全局值传递给Circle()这样的：

 return setInterval(function () {
            Circle(x, y, r);
        }, 10);

但这是非常消耗内存的代码，因为每秒绘制同一个圆圈 100 次，所以几分钟后屏幕上就会出现大量圆圈......我建议你只在事件处理程序中绘制圆圈，没有任何计时器。

也不需要将此间隔返回到任何地方（除非这只是您的代码的一部分，并且在 中有一个接收器windowLoaded()）。

由于“额外” return，事件处理程序分配init()是无用的，因为return上面会将执行移回windowLoaded(). 因此，函数的其余部分将永远不会被执行。我建议您将return（目前无用）或整行移动到函数的末尾。

于 2012-12-14T13:12:30.027 回答