Question

从我的观点来看，我正在以正确的方式做任何事情。当页面加载时我开始我的脚本，我的语法没问题。我想的问题是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;
    }

Answer 1

代码中的第一个问题是setInterval()，它在没有参数的情况下调用Circle()。然而，有全局x，y和r，这些都没有在Circle()中定义，因为它的同名参数会影响全局变量。（Function scope）

但是，您可以将这些全局值传递给Circle()，如下所示：

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

但这是非常耗费内存的代码，因为同一个圆圈每秒被绘制100次，屏幕上会有几吨圆圈......我建议你画圆圈仅在事件处理程序中，没有任何计时器。

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

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

Canvas脚本不输出任何内容

1 个答案: