Question

我正在尝试创建动画以学习Canvas，我的代码总是返回TypeError: xxx is not a function，其中xxx是第一个函数内的任何内容？

无论第一个被调用函数中的第一个是什么，它都将指向此元素。在当前异常中，它将抛出TypeError: ctx.beginPath is not a function。我不知道出了什么问题

<!DOCTYPE html>
<html 
lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
    <p>
        <canvas id="canvasImg" style="width: 500px; height: 500px; border: solid 1px #000;">
        </canvas>
    </p>
    <script>
        window.requestAnimFrame = (function(){
          return  window.requestAnimationFrame       ||
                  window.webkitRequestAnimationFrame ||
                  window.mozRequestAnimationFrame    ||
                  function( callback ){
                    window.setTimeout(callback, 1000 / 60);
                  };
        })();


        function activate() {
            var canvas = document.getElementById('canvasImg');

            canvas.width = 500;
            canvas.height = 500;
            var fill_styles = ["#aa0000", "#a0a000", "#a00a00", "#a000a0", '#a0000a', "#0aa000", "#0a0a00", "#0a00a0", "#0a000a", "#00aa00", "#00a0a0", "#00a00a", "#000aa0", "#000a0a", "#0000aa"];
            var counter = 0;
            var ctx = canvas.getContext('2d');

            document.getElementById('canvasImg').addEventListener("click", function(event) {
                mnoznik = fill_styles.indexOf(ctx.fillStyle)+1;
                currentStyle = ctx.fillStyle ? fill_styles[ mnoznik % fill_styles.length ] : fill_styles[0];

                draw(ctx, currentStyle);

            });

            function addFill(ctx) {
                ctx.beginPath();
                ctx.fillRect (0, 0, canvas.width, canvas.height);
                ctx.clearRect(canvas.width/4, canvas.height/4, canvas.width/2, canvas.height/2);
                for(var i = 1; i<13; i++){
                    ctx.strokeRect(canvas.width/4+(10*i), canvas.height/4+(10*i), canvas.width/2-(20*i), canvas.height/2-(20*i));
                };
                ctx.closePath();
                ctx.fill();
            }

            function addCrossedLines(ctx) {
                ctx.beginPath();
                ctx.moveTo(0,0);
                ctx.lineTo(canvas.width, canvas.height);
                ctx.moveTo(0,canvas.height);
                ctx.lineTo(canvas.width, 0);
                ctx.closePath();
                ctx.stroke();
                ctx.fill();
            }

            function addCircle(ctx, deg) {
                ctx.beginPath();
                ctx.arc(canvas.width/2, canvas.height/2, (canvas.width+canvas.height)/5, deg*Math.PI, 2*Math.PI);
                ctx.closePath();
                ctx.fill();
                ctx.stroke();
            }

            function draw(ctx, currentStyle) {
                requestAnimationFrame(draw);

                ctx.fillStyle = currentStyle;

                addFill(ctx);
                addCrossedLines(ctx);
                ctx.fillStyle = "transparent";
                addCircle(ctx, counter/180);

                counter++;
                console.log(counter);
            }
        }

        window.onload = activate;
    </script>
</body>
</html>

调用函数总是返回TypeError

0 个答案: